javascript - 在 Google Maps API 中将地点 ID 位置传递到目的地

Question

我正在尝试弄清楚如何将 Google Places 位置的几何位置动态地传递到路线服务请求目的地。如果我使用

 service.getDetails({
        placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU'
      }, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,
            icon: 'img/pillicon.jpg'
          });              
        }       

要获得位置，然后如何将其传递给我的请求

var request = {
        origin: currentLoc,
        destination: place.geometry.location, //not sure about this           
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    }; 

我已经尝试返回 place.geometry.location 然后调用它，并将其转换为字符串，但我仍然无法访问它。谢谢，我是 javascript 的新手

Answer 1

最简单的方法:将 placeId 直接传递给 DirectionsRequest

proof of concept fiddle

代码片段:

var geocoder;
var map;
var service;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

var curLoc = new google.maps.LatLng(35.0853336, -106.6055534);

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(curLoc, {
    placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU'
  }, directionsService, directionsDisplay);
}

function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) {
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

您的问题很可能是 PlacesService 是异步的，您需要使用其回调例程中返回的结果。

proof of concept fiddle

代码片段:

var geocoder;
var map;
var service;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

var curLoc = new google.maps.LatLng(35.0853336, -106.6055534);

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  directionsDisplay.setMap(map);
  service = new google.maps.places.PlacesService(map);
  service.getDetails({
    placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU'
  }, function(place, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
      });
      map.setCenter(marker.getPosition());
      calculateAndDisplayRoute(curLoc, marker.getPosition(), directionsService, directionsDisplay);

    }
  });


}

function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) {
  directionsService.route({
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas"></div>