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

时间:2017-08-04 08:21:46

标签: javascript google-maps google-maps-api-3

Google Places API网络服务每天为非帐单帐户提供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>

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

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

1 个答案:

答案 0 :(得分: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