Question

当我向谷歌询问方向时，两者都是＆＃34; MMU＆＃34;和＆＃34; MMU机场＆＃34;工作正常，但是当我使用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

这看起来像是一个数据问题。路线服务/地理编码器识别莫里斯敦市机场，但不识别MMU。我报告说，通过谷歌地图“报告错误”（地图的右下角），不确定是否会被接受。

代码段

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

考虑到您的上一条评论，您似乎拥有了地方库的自动填充功能。在这种情况下，您可以从autocomplete元素中检索地点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 Maps Directions API以选择正确的机场？

2 个答案: