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

Question

我正忙于使用谷歌地图。一切正常。首页上有一张绘制路线的 map ，该路线来自 2 个用户输入。

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

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

在谷歌发回建议之前，是否可以为第二个输入提供半径或其他内容？我发现的所有游乐设施都有 50KM 的限制，而大多数游乐设施都超过 50KM。

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

Answer 1

radius 不是一个可行的选项，但您可以在应该首选结果的位置周围定义一个区域(LatLngBounds) 自动完成的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>