Question

我有一个网页在同一页面上使用google place和google maps API。用户从Google地方信息自动填充功能中选择某个位置，然后Google地图以该给定位置为中心。

此事件的逻辑似乎运行良好，但是我注意到1.）“自动完成”的位置建议随着在搜索栏中搜索到的每个其他位置而变得越来越慢，并且2.）位置上的阴影每进行一次其他搜索，建议就会变得越来越暗（请参见下图）。

清除浏览器缓存后，此问题似乎已“重置”，这使我相信问题是输入框中的先前搜索字词存储在某处，并降低了Google Places的性能。

如果这是一个简单的问题，我深表歉意，但是过去几天在这个问题上进行搜索并没有给我带来任何好处。有帮助吗？

出现任何问题之前的搜索框视图：

多次先前搜索后的搜索栏：

我的initMap（）函数：函数initMap（）{

        var myLatLng = {lat: 40, lng: -20}; //display the initial main map
        map = new google.maps.Map(document.getElementById('bigMainMap'), {
            center: myLatLng,
            mapTypeControl: false,
            zoom: 3
        });

        var searchTerm = $('#mainAdvSearchBox')[0];
        var autoComplete = new google.maps.places.Autocomplete(searchTerm);         

        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode( {'address': chosenArea}, function(results, status) {  //use google place bounds to appropriately zoom on street/city/country
            if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                        map.fitBounds(results[0].geometry.viewport);
                        google.maps.event.addListenerOnce(map, 'bounds_changed', setSelectedMarkers); 
                }
                else
                    setAllMarkers(); //user has directly navigated to adventures page, show world map and all events     
        });
}

我包含Google api的标签：

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&callback=initMap" async defer></script>

Answer 1

此问题是由实施错误引起的。通常在

new google.maps.places.Autocomplete

被添加到输入的keyup事件监听器中，如下所示：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 13
  });

  var input = document.getElementById('pac-input');

  // this is where things starts to go wrong
  input.addEventListener('keyup', function() {
    var autocomplete = new google.maps.places.Autocomplete(input);
  });
}

在此处检查错误的实现：http://jsbin.com/popucap/edit?js,output

输入框的侦听器部分不是必需的。这会使您的自动填充功能变得疯狂。自动完成功能会一次又一次地将其堆放在先前的建议上。因为每次输入字符时，都会自动创建自动完成功能。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 13
  });

  var input = document.getElementById('pac-input');

  // this is how it should be
  var autocomplete = new google.maps.places.Autocomplete(input);
}

在此处查看工作示例：http://jsbin.com/cubirod/edit?js,output

如果这不是您的操作方式，那么您应该了解我的样本如何发生这种情况。希望对您有帮助！

Google Places API的自动填充性能逐渐变慢

1 个答案: