如何让 Google Maps Directions API 选择正确的机场？

Posted 2023-02-23

【中文标题】如何让 Google Maps Directions API 选择正确的机场？

【英文标题】：How do I get Google Maps Directions API to choose the correct Airport?

【发布时间】：2016-06-02 22:20:48

【问题描述】：

当我向 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

【参考方案1】：

这看起来像是数据问题。方向服务/地理编码器识别莫里斯敦市机场，但不识别 MMU。我通过谷歌地图“report an error”（地图右下角）报告了，不知道会不会被接受。

代码 sn-p：

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>

【讨论】：

感谢您这样做！我最终通过使用 DropDown 的全文“MMU | Morristown Municipal Airport”来修复它。这很痛苦，因为我不得不将它传递到一个新的 localstorage 变量（用于 4 个机场）中的页面管道中，然后更改一堆代码（我仍然需要以前的 localstorage 变量，因为我的数据库都基于 IATA）

【参考方案2】：

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

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

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

代码 sn-p：

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>