Google地图 - 自动完成&方向API - 触发onchange（）下拉列表？ [英] Google Maps - Autocomplete & Directions API - trigger onchange() for dropdown list?

问题描述

我有Google Map和两个输入。

  //首次输入自动完成
 
 var input1 =（的document.getElementById（ '开始'））; 
 var autocomplete1 = new google.maps.places.Autocomplete（input1）; 
 
 autocomplete1.bindTo（'bounds'，map）; 
 
 //第二次输入自动完成
 
 var input2 =（document.getElementById（'end'））; 
 var autocomplete2 = new google.maps.places.Autocomplete（input2）; 
 
 autocomplete2.bindTo（'bounds'，map）; 
  

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

 函数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 =textid =startonchange =calcRoute（）; /> 
< input type =textid =endonchange =calcRoute（）; /> 
  

问题：

如果我在这些输入中输入完整地址，那么一切都可以很好地完成，例如：

柏林，德国&汉堡，德国（我想这是因为每一个字母输入触发onchange（））。

但是当我输入：

柏林，德国然后
Hamb>从Google Autocomplete下拉列表中点击汉堡

它并不显示汉堡，它显示了一个叫Hamb的小镇。

有什么方法可以解决这个问题？

解决方案

  autocompleteTo = new google.maps.places.Autocomplete（
（document.getElementById（'end'）），
 {types：['geocode']} 
）; 
 google.maps.event.addListener（autocompleteTo，'place_changed'，function（）{
 calcRoute（）; 
}）; 
  

监听place_changed事件会更有效，然后在输入字段的每次更改时触发路径重新计算。

I have Google Map and two inputs. Both of them use autocomplete, like this:

//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);

After I fill both of these inputs I'm displaying the shortest way betweeen them using 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);
    }
  });
}

My inputs look like this:

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

The Problem:

Everything works perfectly fine if I type full addresses in these inputs for example:

Berlin, Germany & Hamburg, Germany (I guess that's because every letter typed triggers onchange()).

But when I type:

Berlin, Germany and then Hamb > click on Hamburg from Google Autocomplete Dropdown List

It doesn't show Hamburg, it shows a town called Hamb.

Is there any way to fix it?

解决方案

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

Listening to the place_changed event is much more efficient then triggering a route recalculation on every change of the input field.

这篇关于Google地图 - 自动完成&方向API - 触发onchange（）下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！