searchBox Google Maps with pagination

时间:2016-05-28 23:57:01

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

所以我要做的是用搜索框实现谷歌地图。目前,搜索框根据搜索结果检索20个顶部位置。

我注意到的是没有对此进行分页。如果我输入“披萨”,它会在当前位置界限中给出前20个结果。但是,当我使用google.maps.places.PlacesService(map) textSearch函数获取披萨搜索列表时,我会通过分页获得超过20个结果。

使用searchBox后,是否有办法在searchBox上进行分页或使用textSearch函数提供分页?

我这里有一个片段:

var canvas = element.find('div')[0];
var mapOptions = {
    zoom: 5,
    minZoom: 2,
};
var searchBox = new google.maps.places.SearchBox('pizza');
var placeService = new google.maps.places.PlacesService(map);

google.maps.event.addListener(searchBox, 'places_changed', locationChange);

function locationChange() {
    var places = searchBox.getPlaces();
    //Determine if there are additional places not provided by searchbox. Using text 
    var request = {
        query: input.value,
    };
    var textSearchPlaces = placeService.textSearch(request, callback);
    function callback(results, status, pagination) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            var hi = places;
            for (var i = 0; i < results.length; i++) {
                var place = results[i];
            }
        }
    }
    if (places.length === 0) {
        return;
    }
};

正如您所看到的,这不是使用分页查找的最理想的解决方案,因为我必须过滤textSearchPlaces以查看这些地方是否与searchBox结果不重复。

我还考虑过只删除searchBox并使用textSearch函数,但我意识到我没有autoComplete函数提供searchBox提供的建议。

1 个答案:

答案 0 :(得分:-2)

您最有可能获得OVER_QUERY_LIMIT

if (status == google.maps.places.PlacesServiceStatus.OK) {

在完成所有列表后尝试排队details requests,添加相同的超时逻辑以检查此行上的google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT

if (pagination.hasNextPage) {
//add all places to the list
setTimeout('pagination.nextPage()',2000);
}  else {
createMarkers(placesList);
}

使用地方信息时应使用google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT