限制或延迟 Google Places API 自动建议

Mic*_*ael 5 javascript google-maps google-maps-api-3

Google Places API Web 服务对非计费帐户有每天 1000 个请求的配额限制。使用搜索框自动建议功能为每次按键提供多个位置时,将很快达到此限制。

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div style="height:100%; width:100%;position:absolute;">
<div id="map"></div>
</div>
<script>
  window.onload = initAutocomplete;
  function initAutocomplete() {

            var my_position = new google.maps.LatLng(51.163375, 10.447683);
            var map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: 51.163375, lng: 10.447683},
              disableDoubleClickZoom: true,
              zoom: 9,
              mapTypeId: 'roadmap'
            });

            // Create the search box and link it to the UI element.
            var input = document.getElementById('pac-input');

            var searchBox = new google.maps.places.SearchBox(input);
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

            // Bias the SearchBox results towards current map's viewport.
            map.addListener('bounds_changed', function() {
              searchBox.setBounds(map.getBounds());
            });

            var markers = [];
            var crowdMarker = new google.maps.Marker({
              position: my_position,
              map: map
            });
            google.maps.event.addListener(map, 'dblclick', function(e){
              var positionDoubleClick = e.latLng;
              crowdMarker.setPosition(positionDoubleClick);
              var lat = crowdMarker.getPosition().lat();
              var lng = crowdMarker.getPosition().lng();
            });
            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.

            google.maps.event.addDomListener(searchBox, 'keydown', function (e) {
              if (e.keyCode == 13) {
                  e.preventDefault();
              }
          });
            searchBox.addListener('places_changed', function() {
              var places = searchBox.getPlaces();

              if (places.length == 0) {
                return;
              }

              // Clear out the old markers.
              markers.forEach(function(marker) {
                marker.setMap(null);
              });
              markers = [];

              // For each place, get the icon, name and location.
              var bounds = new google.maps.LatLngBounds();
              places.forEach(function(place) {
                if (!place.geometry) {
                  console.log("Returned place contains no geometry");
                  return;
                }
                var icon = {
                  url: place.icon,
                  size: new google.maps.Size(71, 71),
                  origin: new google.maps.Point(0, 0),
                  anchor: new google.maps.Point(17, 34),
                  scaledSize: new google.maps.Size(25, 25)
                };

                // Create a marker for each place.
                markers.push(new google.maps.Marker({
                  map: map,
                  icon: icon,
                  title: place.name,
                  position: place.geometry.location
                }));

                if (place.geometry.viewport) {
                  // Only geocodes have viewport.
                  bounds.union(place.geometry.viewport);
                } else {
                  bounds.extend(place.geometry.location);
                }
              });
              map.fitBounds(bounds);
            });
          }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=myAPIKey&libraries=places"
    async defer></script>
Run Code Online (Sandbox Code Playgroud)

我尝试过的事情包括设置 SearchBox 的绑定以将建议限制在设置区域,以及在 keydown 部分中添加延迟。

任何人都可以提出一种方法来限制或延迟自动建议的出现,从而减少发送的请求吗?

xom*_*ena 2

恐怕 Maps JavaScript API 库中自动完成和搜索框的当前实现不允许以编程方式限制或延迟请求。您可以在 Google 问题跟踪器中查看此功能请求:

https://issuetracker.google.com/issues/35823678

请为此功能请求加注星标以添加您的投票。我能想到的唯一解决方法是实现您自己的使用google.maps.places.AutocompleteService类的自动完成元素,并且您将能够控制发送到AutocompleteService.

https://developers.google.com/maps/documentation/javascript/reference#AutocompleteService

  • 不,我的意思是您决定何时发送请求。例如,您可以等待用户输入 3 个字母,然后再发送请求或类似的内容。 (3认同)