谷歌地图使用地点 ID 指定原点答案

【问题标题】：Google Maps specify origin with place id谷歌地图使用地点 ID 指定原点
【发布时间】：2017-10-05 17:21:08
【问题描述】：

我可以使用经纬度指定原点

  DirectionsService.route({
    origin: new google.maps.LatLng(-34.397, 150.644)
  ...

有没有办法用地点 id 做到这一点？

origin: new google.maps.places.PlacesService('ChIJN1t_tDeuEmsRUsoyG83frY4'

和

origin: 'place_id:ChIJN1t_tDeuEmsRUsoyG83frY4'

不工作。

【问题讨论】：

标签： google-maps google-maps-api-3 google-places-api google-places google-distancematrix-api

【解决方案1】：

per the documentation 的正确语法是：

origin: {placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4"}

proof of concept fiddle

代码 sn-p：

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  directionsService.route({
    origin: {
      placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4"
    },
    destination: document.getElementById('end').value,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

<div id="floating-panel">
  <b>Start: </b>
  <input id="end" value="Sydney, AU" />
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

【讨论】：