Google Maps API (JS) 在航路点中使用 PlaceId 创建路线

Posted 2023-02-16

【中文标题】Google Maps API (JS) 在航路点中使用 PlaceId 创建路线

【英文标题】：Google Maps API (JS) Create a route using PlaceId in waypoints

【发布时间】：2016-08-14 07:28:57

【问题描述】：

仅当我使用 LatLng 或 String 参数时才会创建路线，但我需要通过 PlaceId 创建它但它不起作用

示例：

directionsService.route(
        origin: 'placeId': 'ChIJc1lGdwfP20YR3lGOMZD-GTM',
        destination: 'placeId': 'ChIJdTGhqsbP20YR6DZ2QMPnJk0',
        waypoints: [stopover: true, location: new google.maps.Place('ChIJRVj1dgPP20YRBWB4A_sUx_Q')],
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    

【参考方案1】：

只需要传递google.maps.Place 对象作为航点位置。 例如：

directionsService.route(
    origin:  placeId: "ChIJc1lGdwfP20YR3lGOMZD-GTM" ,
    destination:  placeId: "ChIJdTGhqsbP20YR6DZ2QMPnJk0" ,
    waypoints: [ stopover: true, location:  placeId: "ChIJRVj1dgPP20YRBWB4A_sUx_Q"  ],
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING

location 指定航路点的位置，以 LatLng 形式，以 google.maps.Place 对象或将被地理编码的字符串。

Google Maps - Direction Services Documentation

Here's the JsFiddle

【参考方案2】：

我在发布的代码中收到一个 javascript 错误：Uncaught TypeError: google.maps.Place is not a constructor 在这一行：

waypoints: [stopover: true, location: new google.maps.Place('ChIJRVj1dgPP20YRBWB4A_sUx_Q')],

您需要像使用 origin 和 destination placeIds 一样指定 location：

waypoints: [
  stopover: true,
  location: 'placeId':"ChIJRVj1dgPP20YRBWB4A_sUx_Q"
],

documentation中的描述：

Google.maps.Place 对象规范

placeId |类型：字符串 地点的地点 ID（例如商家或兴趣点）。地点 ID 是 Google 地图数据库中地点的唯一标识符。请注意，placeId 是识别地点的最准确方式。如果可能，您应该指定 placeId 而不是 placeQuery。可以从对 Places API 的任何请求（例如 TextSearch）中检索地点 ID。也可以从对地理编码 API 的请求中检索地点 ID。如需更多信息，请参阅overview of place IDs。

proof of concept fiddle

代码 sn-p：

function initialize() 
  var map = new google.maps.Map(document.getElementById("map_canvas"));
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer(
    map: map
  );
  directionsService.route(
    origin: 
      'placeId': 'ChIJc1lGdwfP20YR3lGOMZD-GTM'
    ,
    destination: 
      'placeId': 'ChIJdTGhqsbP20YR6DZ2QMPnJk0'
    ,
    waypoints: [
      stopover: true,
      location: 
        'placeId': "ChIJRVj1dgPP20YRBWB4A_sUx_Q"
      
    ],
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  , function(response, status) 
    if (status === '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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>