javascript - 使用 GoogleAPI JS 呈现路线

标签 javascript google-maps google-maps-api-3

我正在学习一个涉及 GoogleMaps API JS 的教程，一切顺利。在尝试构建我自己的应用程序时，我遇到了显示路线的问题。我正在处理的应用程序主要是用 ruby​​ on rails 编写的。

“伪代码”问题是点击“查看路线”按钮时， map 上没有显示路线。

下面是点击“及时搜索”按钮时触发第一个事件的 HTML，以及请求的 CSS。

<body>
 <div>
    <span class="text"> Within </span>
    <select id='max-duration'>
      <option value="10">10 min</option>
    </select>
    <select id="mode">
      <option value="DRIVING">drive</option>
    </select>
    <span class="text">of</span>
    <input id= 'search-within-time-text' type='text' placeholder='Your Location'>
    <input id= 'search-within-time' type='button' value='Go'>
  </div>
 <div id="map"></div>
 <script src="https://maps.googleapis.com/maps/api/js?libraries=places,drawing,geometry&key=<%= ENV["MAP_API"] %>&v=3"></script>
</body>

<style>
  #map {
   bottom: 0px;
   height: 500px;
   left: 362px;
   position: absolute;
   right: 0px;
  }

 .container {
  height: 500px;
  position: relative;
 }

 .options-box {
  background: #fff;
  border: 1px solid black;
  height: 91.75%;
  line-height: 35px;
  padding: 10px 10px 30px 10px;
  text-align: left;
  width: 340px;
 }

 #zoom-to-area-text{
  width:200px;
 }
</style>

存储数据的位置数组位于 map Controller 中，我们从 SQLite 数据库中推送数据。

def index
@test_array = []
@test.each do |h|
  @test_array.push({lat: h.lat, lng: h.lng})
  end
end

特别是我认为问题出在函数 displayDirections 中。可以在完整代码的底部找到

displayDirections 函数是在 initMap 函数之外编写的，因为它在 initMap 函数内部编写时存在范围问题。我已阅读下面的问题

Maybe a similar issue

但是在 displayMarkersWithinTime 函数中的 initMap 函数中编写时，在单击事件中定义 displayDirections 时遇到了问题。

感谢任何帮助!谢谢!

function initMap() {
 var map;
 var markers = [];
 var placeMarkers = [];

 document.getElementById('search-within-time').addEventListener('click', function(){
  searchWithinTime();
 });

 map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 39.9523789, lng: -75.1635996},
  zoom: 13,
  mapTypeControl: false
 });   

 var locations = <%= raw @test_array.to_json%>

 for (var i = 0; i < locations.length; i++) {
  var position = locations[i]
  var marker = new google.maps.Marker({
   position: position,
   animation: google.maps.Animation.DROP,
   id: i
   });
   markers.push(marker); 
  } 

 function hideMarkers(markers) {
  for (var i = 0; i < markers.length; i++){
   markers[i].setMap(null);
  }
 }

 function searchWithinTime(){
  var distanceMatrixService = new google.maps.DistanceMatrixService;
  var address = document.getElementById('search-within-time-text').value;
  if (address == ''){
   window.alert('You must enter an address.');
  } else {
   hideMarkers(markers);
   var origins = [];
   for (var i = 0; i < markers.length; i++) {
    origins[i] = markers[i].position;
   }
   var destination = address;
   var mode =  document.getElementById('mode').value;
   distanceMatrixService.getDistanceMatrix({
     origins: origins,
     destinations: [destination],
     travelMode: google.maps.TravelMode[mode],
     unitSystem: google.maps.UnitSystem.IMPERIAL,
   }, function(response, status) {
     if (status !== google.maps.DistanceMatrixStatus.OK) {
       window.alert('Error was: ' + status);
     } else {
       displayMarkersWithinTime(response);
     }
   });
  }
 }

 function displayMarkersWithinTime(response){
  var maxDuration = document.getElementById('max-duration').value;
  var origins = response.originAddresses;
  var destinations = response.destinationAddresses;
  var atLeastOne = false; 
  for (var i = 0; i < origins.length; i++) {
   var results = response.rows[i].elements;
    for (var j = 0; j < results.length; j++) {
     var element = results[j];
     if (element.status === "OK") {
      var distanceText = element.distance.text;
      var duration = element.duration.value / 60;
      var durationText = element.duration.text;
      if (duration <= maxDuration) {
        markers[i].setMap(map);
        atLeastOne = true;
        var infowindow = new google.maps.InfoWindow({
          content : durationText + ' away, ' + distanceText + '<div><input type=\"button\" value=\"View Route\" onclick =' + '\"displayDirections(&quot;' + origins[i] + '&quot;);\"</input></div>'
        });
        infowindow.open(map, markers[i]);
        // if user clicks on marker close the small info window to open a new
        markers[i].infowindow = infowindow;
        google.maps.event.addListener(markers[i], 'click', function (){
          this.infowindow.close();
        });
      }
    }
  }
 }
 if(!atLeastOne) {
   window.alert('We could not find any locations within that distance');
 }
 console.log("hello") 
 } 
}

var map;
var markers = [];
map = new google.maps.Map(document.getElementById('map'), {
 center: {lat: 39.9523789, lng: -75.1635996},
 zoom: 13,
 mapTypeControl: false
});   

function hideMarkers(markers) {
 for (var i = 0; i < markers.length; i++){
  markers[i].setMap(null);
 }
}

 function displayDirections(origin) {
  hideMarkers(markers);
  var directionsService = new google.maps.DirectionsService;
  var destinationAddress = document.getElementById('search-within-time-text').value;
  var mode = document.getElementById('mode').value;
  directionsService.route({
   origin: origin,
   destination: destinationAddress,
   travelMode: google.maps.TravelMode[mode]
  }, function(response, status) {
  console.log(response)
  console.log(status)
  if (status === google.maps.DirectionsStatus.OK) {
    var directionsDisplay = new google.maps.DirectionsRenderer({
      map: map,
      directions: response,
      draggable: true,
      polylineOptions: {
        strokeColor: 'black'
      }
     }, console.log(map), console.log(response));
    } else {
     window.alert('Directions request failed due to ' + status);
    }
   });
   console.log("testing")
  }
 google.maps.event.addDomListener(window, initMap())

最佳答案

您的(已初始化的) map 变量是 initMap 函数的本地变量。使其全局化。

改变:

function initMap() {
  var map;
  // ...

收件人:

var map;
function initMap() {

proof of concept fiddle

代码片段:

var map;

function initMap() {
  var markers = [];
  var placeMarkers = [];
  var titles;
  var latitudes;
  var longitudes;

  var directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);

  document.getElementById('show-listings').addEventListener('click', showListings);
  document.getElementById('hide-listings').addEventListener('click', function() {
    hideMarkers(markers);
  });

  document.getElementById('search-within-time').addEventListener('click', function() {
    searchWithinTime();
  });

  var timeAutocomplete = new google.maps.places.Autocomplete(
    document.getElementById('search-within-time-text'));

  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 39.9523789,
      lng: -75.1635996
    },
    zoom: 13,
    mapTypeControl: false
  });

  var locations = [{
      lat: 39.952584,
      lng: -75.165222
    }, {
      lat: 47.6062095,
      lng: -122.3320708
    },
    {
      lat: 34.0522342,
      lng: -118.2436849
    },
    {
      lat: 39.114053,
      lng: -94.6274636
    }, {
      lat: 25.7616798,
      lng: -80.1917902
    }
  ];

  for (var i = 0; i < locations.length; i++) {
    var position = locations[i]
    var marker = new google.maps.Marker({
      position: position,
      animation: google.maps.Animation.DROP,
      id: i,
      map: map
    });
    markers.push(marker);
  }

  function showListings() {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
      bounds.extend(markers[i].position);
    }
    map.fitBounds(bounds);
  }

  function hideMarkers(markers) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }

  function searchWithinTime() {
    var distanceMatrixService = new google.maps.DistanceMatrixService();
    var address = document.getElementById('search-within-time-text').value;
    if (address == '') {
      window.alert('You must enter an address.');
    } else {
      hideMarkers(markers);
      var origins = [];
      for (var i = 0; i < markers.length; i++) {
        origins[i] = markers[i].position;
      }
      var destination = address;
      var mode = document.getElementById('mode').value;
      distanceMatrixService.getDistanceMatrix({
        origins: origins,
        destinations: [destination],
        travelMode: google.maps.TravelMode[mode],
        unitSystem: google.maps.UnitSystem.IMPERIAL,
      }, function(response, status) {
        if (status !== google.maps.DistanceMatrixStatus.OK) {
          window.alert('Error was: ' + status);
        } else {
          displayMarkersWithinTime(response);
        }
      });
    }
  }

  function displayMarkersWithinTime(response) {
    var maxDuration = document.getElementById('max-duration').value;
    var origins = response.originAddresses;
    var destinations = response.destinationAddresses;
    var atLeastOne = false;
    for (var i = 0; i < origins.length; i++) {
      var results = response.rows[i].elements;
      for (var j = 0; j < results.length; j++) {
        var element = results[j];
        if (element.status === "OK") {
          var distanceText = element.distance.text;
          var duration = element.duration.value / 60;
          var durationText = element.duration.text;
          if (duration <= maxDuration) {
            markers[i].setMap(map);
            atLeastOne = true;
            var infowindow = new google.maps.InfoWindow({
              content: durationText + ' away, ' + distanceText + '<div><input type=\"button\" value=\"View Route\" onclick =' + '\"displayDirections(&quot;' + origins[i] + '&quot;);\"</input></div>'
            });
            infowindow.open(map, markers[i]);
            // if user clicks on marker close the small info window to open a new
            markers[i].infowindow = infowindow;
            google.maps.event.addListener(markers[i], 'click', function() {
              this.infowindow.close();
            });
          }
        }
      }
    }
    if (!atLeastOne) {
      window.alert('We could not find any locations within that distance');
    }
    console.log("hello")
  }
}

var map;
var markers = [];
map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: 39.9523789,
    lng: -75.1635996
  },
  zoom: 13,
  mapTypeControl: false
});

function hideMarkers(markers) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
}

function displayDirections(origin) {
  hideMarkers(markers);
  var directionsService = new google.maps.DirectionsService();
  var destinationAddress = document.getElementById('search-within-time-text').value;
  var mode = document.getElementById('mode').value;
  directionsService.route({
    origin: origin,
    destination: destinationAddress,
    travelMode: google.maps.TravelMode[mode]
  }, function(response, status) {
    console.log(response)
    console.log(status)
    if (status === google.maps.DirectionsStatus.OK) {
      var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        directions: response,
        draggable: true,
        polylineOptions: {
          strokeColor: 'black'
        }
      }, console.log(map), console.log(response));
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
  console.log("testing")
}
google.maps.event.addDomListener(window, 'load', initMap)
html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: white;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" value="search" id="search-within-time" />
<input type="text" value="coffee" id="search-within-time-text" />
<input type="button" value="Show" id="show-listings" />
<input type="button" value="Hide" id="hide-listings" />
<input type="text" value="DRIVING" id="mode" />
<input type="text" value="1200" id="max-duration" />
<div id="map"></div>

关于javascript - 使用 GoogleAPI JS 呈现路线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49677381/

上一篇：javascript - 从 POST 请求中解析 req.body

下一篇：javascript - Rails 5 - Rails-ujs 已经加载

相关文章：

google-maps - 如何在 JasperReport map 上显示标签和自定义图标？

javascript - 使用谷歌地图 API v3 的地点名称坐标

javascript - MongoDB聚合查询以获取总计数

javascript - 从 ajaxResponse 下载 docx 文件

ios - swift - 如何在再次打开应用程序之前从上一个 session 中删除谷歌地图标记？

javascript - 向 GMaps 添加标记(谷歌地图)

javascript - 将 javascript var 传输到 html 表单文本框

google-maps - 如何按字母顺序对给定图层上的标记进行排序

javascript - Express json() 创建奇怪的 JSON(键与值合并)

javascript - Angular 用链接替换部分不安全文本

©2024 IT工具网  联系我们