在谷歌地图API中将地点ID位置传递到目的地

Pass Place ID location to destination in Google Maps API

本文关键字：位置 目的地 ID API 谷歌地图      更新时间：2023-09-26

我正试图弄清楚如何将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 的新手

最简单的方法：将placeId直接传递到DirectionsRequest

概念验证小提琴

代码片段：

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是异步的，您需要使用其回调例程中返回的结果。

概念验证小提琴

代码片段：

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>

相关文章：