无法使用Direction绘制路由

Question

我正在使用，并试图为下面的地址绘制路径。

1. 布拉德斯通汽车有限公司，都柏林，爱尔兰
2. 爱尔兰都柏林红牛莫兰酒店
3. Campion保险有限公司，爱尔兰都柏林

以下不适用于上述地址。请帮帮忙。

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

    document.getElementById('submit').addEventListener('click', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var waypts = [];
    var checkboxArray = document.getElementById('waypoints');
    for (var i = 0; i < checkboxArray.length; i++) {
      if (checkboxArray.options[i].selected) {
        waypts.push({
          location: checkboxArray[i].value,
          stopover: true
        });
      }
    }

    directionsService.route({
      origin: document.getElementById('start').value,
      destination: document.getElementById('end').value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        debugger;
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
</script>

Answer 1

这些都是“地方”而不是地址。使用placeId获取placeId，或者使用它们的邮政地址。

请参阅文档中的地理编码最佳实践

用例： 用户输入的模糊查询(例如，不完整或格式错误的地址)放置API Place自动完成服务以获得place ID，然后Geocoding API将place ID编码为latlng。

概念小提琴的证明 (在谷歌的PlaceId查找器上查找位置)

代码片段：

​

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

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

    document.getElementById('submit').addEventListener('click', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var waypts = [];
    /* Red Cow Moran Hotel, Dublin, Ireland
      Place ID ChIJX6NlcPMMZ0gRoG0Han_CNGE
      Naas Rd, Fox-And-Geese, Dublin 22, Ireland
      */
    waypts.push({
      location: {
        placeId: "ChIJX6NlcPMMZ0gRoG0Han_CNGE"
      },
      stopover: true
    });

    directionsService.route({
      /* Braudstone Motors Ltd
         Place ID ChIJCVY5DJkMZ0gRy_6zPWZZNkA
         39 Ballymount Rd Lower, Wilkinstown, Dublin 12, Ireland
      */
      origin: {
        placeId: "ChIJCVY5DJkMZ0gRy_6zPWZZNkA"
      },
      /* Campion Insurances Ltd, Dublin, Ireland
      Place ID ChIJIbEe7roMZ0gRspMhJ1yiado
      Second Floor, Otter House,, Naas Road, Fox-And-Geese, Dublin, Ireland
      */
      destination: {
        placeId: "ChIJIbEe7roMZ0gRspMhJ1yiado"
      },
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        debugger;
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<input id="start" value="Braudstone Motors Ltd,Dublin,Ireland" size="50" />
<br>
<input id="waypt" value="Red Cow Moran Hotel, Dublin, Ireland" size="50" />
<br>
<input id="end" value="Campion Insurances Ltd, Dublin, Ireland" size="50" />
<br>
<input id="submit" value="submit" type="button" />
<div id="map"></div>

​