谷歌地图建议.根据第一次输入筛选建议

Google maps suggestions. filter suggestions based on first input

本文关键字：输入 筛选 第一次 谷歌地图      更新时间：2023-09-26

我在忙着看谷歌地图。一切正常。在首页上有一个地图，它绘制了一条路线，来自两个用户输入。

现在我想根据第一个输入的位置，过滤来自第二个输入的建议。

目前，如果在第一个输入输入荷兰的地址，建议开始给出在美国的位置，如果你没有指定一个完整的地址。

是否有可能在谷歌发送建议之前给第二个输入一个半径或其他东西?我发现所有的骑行限制都是50公里，而大多数骑行都超过50公里。

基于国家是行不通的，因为它是国际性的。

radius不是一个可能的选项，但您可以定义一个区域(LatLngBounds)周围的地方，结果应该是首选通过Autocomplete的bounds选项(限制仅适用于国家)

该面积可通过google.maps.geometry.spherical.computeOffset

计算

的例子:

      function init() {
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 1,
            center: new google.maps.LatLng(0, 0),
            noClear: true,
            disableDefaultUI: true
          }),
          diagonal = 250, //length of the diagonal in km
          inputs = map.getDiv().querySelectorAll('input[id^="pac"]'),
          acs = [],
          area = new google.maps.Rectangle(),
          marker = new google.maps.Marker({
            animation: google.maps.Animation.DROP
          });
        for (var i = 0; i < inputs.length, i < 2; ++i) {
          map.controls[google.maps.ControlPosition.TOP_CENTER].push(inputs[i]);
          acs.push(new google.maps.places.Autocomplete(inputs[i]));
          if (i === 1) {
            //first input
            google.maps.event.addListener(acs[0], 'place_changed', function() {
              //when there is a valid place
              if (this.getPlace().geometry) {
                var center = this.getPlace().geometry.location,
                  bounds = new google.maps.LatLngBounds(center);
                //create a area around the  place
                bounds.extend(google.maps.geometry.spherical.computeOffset(center, diagonal / 2 * 1000, 135));
                bounds.extend(google.maps.geometry.spherical.computeOffset(center, diagonal / 2 * 1000, 315));
                //just a rectangle to visualize the used area
                area.setOptions({
                  map: map,
                  bounds: bounds
                });
                map.fitBounds(bounds);
                //set the prefered search-area for the 2nd autocomplete
                acs[1].setBounds(bounds);
              } else {
                acs[1].setBounds(null);
                area.setMap(null);
              }
            });
            //2nd input
            google.maps.event.addListener(acs[1], 'place_changed', function() {
              //when there is a valid place
              if (this.getPlace().geometry) {
                //draw a marker and set the center of the map
                var center = this.getPlace().geometry.location;
                map.setCenter(center)
                marker.setOptions({
                  map: map,
                  position: center
                })
              } else {
                marker.setMap(null);
              }
            });
          }
        }
      }
 html,
 body,
 #map_canvas {
   height: 100%;
   margin: 0;
   padding: 0;
 }
<div id="map_canvas">
  <input id="pac1">
  <input id="pac2">
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places,geometry&callback=init"></script>

相关文章：