如何获取 Google 地图路线 API 以选择正确的机场？

Question

当我向 google 询问方向时，"MMU" 和 "MMU Airport" 都可以正常工作，但是当我使用 API 时，它一直去 MLU 机场...什么给了？

代码：

var directionService = new google.maps.DirectionsService;
var geocoder = new google.maps.Geocoder;
directionService.route({
        origin: $('#selAirport').val() + ' Airport',
        destination: $('#selZIPZone').val(),
        travelMode: google.maps.TravelMode.DRIVING
    },
    function(response, status) {
        console.log(response, status);
        ...

dev-tools photo showing it received "MMU Airport" as the origin, but set the Start Address to MLU Airport instead

Answer 1

这看起来像是数据问题。方向 service/geocoder 识别 Morristown Municipal Airport，但不识别 MMU。我通过 Google 地图 "report an error"（地图右下角）报告，不确定是否会被接受。

代码片段：

var geocoder;
var map;

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
    });
  var directionService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  directionService.route({
      origin: 'Morristown Airport',
      destination: "Florham Park , NJ",
      travelMode: google.maps.TravelMode.DRIVING
    },
    function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        console.log(response);
        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>

Answer 2

考虑到你最后的评论，你似乎有一个自动完成的地点库。在这种情况下，您可以从自动完成元素中检索地点 ID，并将其传递给路线服务。这样您就可以确保路线服务根据用户的确切选择工作。

请查看此示例并使用自动完成功能搜索您的路线：

http://jsbin.com/xuyisem/edit?html,output

代码片段：

var directionsDisplay;
var directionsService;
var map;
var placeId1, placeId2;      

function initialize() {
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({
        draggable: true
    });
    var mapOptions = {
        zoom:10,
        center: new google.maps.LatLng(32.5101466,-92.0436835) 
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
  
    var inputFrom = document.getElementById('from');
    var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, {});
    autocompleteFrom.bindTo('bounds', map);
    autocompleteFrom.addListener('place_changed', function() {
        var place = autocompleteFrom.getPlace();
        placeId1 = place.place_id;
    });
  
    var inputTo = document.getElementById('to');
    var autocompleteTo = new google.maps.places.Autocomplete(inputTo, {});
    autocompleteTo.bindTo('bounds', map);
    autocompleteTo.addListener('place_changed', function() {
        var place = autocompleteTo.getPlace();
        placeId2 = place.place_id;
    });
}

function calcRoute() {
    if (!placeId1) {
        alert("Please select origin");
        return;
    }
    if (!placeId2) {
        alert("Please select destination");
        return;
    }
    var start = {
        placeId: placeId1
    };
    var end = {
        placeId: placeId2
    };
    var request = {
        origin: start,
        destination:end,
        travelMode: google.maps.TravelMode.DRIVING,
        provideRouteAlternatives: false
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

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

<input type="text" name="from" id="from" placeholder="Select origin" />
<input type="text" name="to" id="to" placeholder="Select destination" />
<input type="button" name="calcroute" value="Get route" onclick="calcRoute();return false;" />
<div id="map-canvas"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&callback=initialize"></script>

如何获取 Google 地图路线 API 以选择正确的机场？

How do I get Google Maps Directions API to choose the correct Airport?

javascript

google-maps

driving-directions

google-maps-api-3