Javascript Google maps api ajax视口标记管理

我在使用google maps API实现视口标记管理时遇到一些问题。我下面的文档可以在这里找到：

我正在使用的部分的标题是“视口标记管理”

我可以一直跟踪代码，直到这一点：

function showMarkers() {

    var bounds = map.getBounds();

    // Call you server with ajax passing it the bounds
    // In the ajax callback delete the current markers and add new markers
}

---

我不知道我需要用什么代码来完成注释掉的行上的指令。如果有必要的话，我目前正在从mySQL数据库中提取标记信息。我不确定我是否遗漏了什么，或者谷歌的文档不够全面。感谢您的帮助

假设您使用的是

jQuery.ajax（）

、PHP和MySQL，我将为您提供一个示例

基本上，您需要监听地图的

bounds\u changed

事件，将地图边界发送到后端，使用边界查询数据库，返回正确的标记，从地图中清除标记并使用新标记更新它

下面是一个示例JS代码：

var markers = [];

function showMarkers() {

    for (var i = 0; i < markers.length; i++) {

        markers[i].setMap(null);
    }

    var bounds = map.getBounds();

    // Call you server with ajax passing it the bounds
    // In the ajax callback delete the current markers and add new markers

    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();

    $.ajax({

        url: 'your_backend_page.php',
        cache: false,
        data: {
            'fromlat': southWest.lat(),
            'tolat': northEast.lat(),
            'fromlng': southWest.lng(),
            'tolng': northEast.lng()
        },

        dataType: 'json',
        type: 'GET',

        async: false,

        success: function (data) {

            if (data) {

                $.each(data, function (i, item) {

                    createMarker(item);
                });
            }
        }
    });
}

function createMarker(item) {

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(item.lat, item.lng),
        map: map,
        draggable: false
    });

    markers.push(marker);
    marker.setMap(map);
}

var标记=[]；
函数showMarkers（）{
对于（var i=0；i

然后在后端页面中，使用参数（fromlat、tolat等）和

echo json_encode（）查询数据库结果

从
bounds\u changed
map事件侦听器调用
showmarks（）
函数。如果不了解事件侦听器，请参阅

代码未经测试，但你明白了
 你不明白哪一部分？AJAX请求？MySQL查询？删除/加载新标记的回调？AJAX请求和删除/加载新标记的回调是我一直坚持的。好吧。您正在使用jQuery吗？或者你能用它吗？