我可以使用
指定纬度和经度的原点 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'
不起作用。
答案 0 :(得分:2)
正确的语法per the documentation是:
origin: {placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4"}
代码段
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>
&#13;