Google Maps - Autocomplete & Directions API - 触发下拉列表的 onchange()？

Posted 2023-02-23

【中文标题】Google Maps - Autocomplete & Directions API - 触发下拉列表的 onchange()？

【英文标题】：Google Maps - Autocomplete & Directions API - trigger onchange() for dropdown list?

【发布时间】：2013-09-09 01:40:55

【问题描述】：

我有谷歌地图和两个输入。它们都使用自动完成功能，如下所示：

//first input autocomplete

var input1 = (document.getElementById('start'));
var autocomplete1 = new google.maps.places.Autocomplete(input1);

autocomplete1.bindTo('bounds', map);

//second input autocomplete

var input2 = (document.getElementById('end'));
var autocomplete2 = new google.maps.places.Autocomplete(input2);

autocomplete2.bindTo('bounds', map);

填写完这两个输入后，我将使用 Directions API 显示它们之间的最短路径：

function calcRoute() 
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var request = 
    origin:start,
    destination:end,
    travelMode: google.maps.TravelMode.DRIVING
  ;
  directionsService.route(request, function(result, status) 
    if (status == google.maps.DirectionsStatus.OK) 
      directionsDisplay.setDirections(result);
    
  );

我的输入如下所示：

<input type="text" id="start" onchange="calcRoute();" />
<input type="text" id="end" onchange="calcRoute();" /> 

问题：

如果我在这些输入中输入完整地址，一切都会正常工作，例如：

德国柏林和德国汉堡（我猜这是因为输入的每个字母都会触发 onchange()）。

但是当我输入时：

柏林，德国，然后 Hamb > 从 Google 自动完成下拉列表中点击 Hamburg

它没有显示汉堡，它显示了一个叫汉布的小镇。

有什么办法可以解决吗？

【参考方案1】：

autocompleteTo = new google.maps.places.Autocomplete(
    (document.getElementById('end')),
    types: ['geocode']
);
google.maps.event.addListener(autocompleteTo, 'place_changed', function () 
    calcRoute();
);

侦听 place_changed 事件比在输入字段的每次更改时触发路线重新计算要高效得多。

【讨论】：

不仅效率更高，而且确实是利用自动完成功能的唯一方法。否则，您将路由到/从到目前为止输入的使用，而不是自动完成建议的。在此过程中，请考虑路由到/从地点的地点 ID，如 developers.google.com/maps/documentation/javascript/examples/…