Question

我忙于谷歌地图。一切都很好。在首页上绘制了一个绘制路线的地图，该地图来自2个用户输入。

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

目前，如果在第一个输入中输入了荷兰的地址，如果您没有指定完整地址，建议就会开始在美国提供地点。

在Google发回建议之前，是否可以给第二个输入提供半径或某些内容？我找到的所有都有50KM的限制，而大多数骑行都超过50KM。

基于国家不会起作用，因为它是国际化的。

Answer 1

radius不是一个可能的选项，但您可以通过LatLngBounds在结果应首选的地方定义一个区域（bounds） - Autocomplete的选项。（限制只适用于国家/地区）

这样的区域可以通过google.maps.geometry.spherical.computeOffset

来计算

示例：

＆＃13;

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

＆＃13;

 html,
 body,
 #map_canvas {
   height: 100%;
   margin: 0;
   padding: 0;
 }

＆＃13;

<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>

＆＃13;

谷歌地图建议。根据第一个输入过滤建议

1 个答案: