在谷歌地图上动态加载标记

Question

我想从 Mysql 数据库动态加载谷歌地图上的标记。地图中心半径 20Km 内的标记应出现，并且随着地图中心的更改/平移，位于 20Km 半径外的旧标记应消失，而新中心半径 20Km 内的新标记应出现。

现在我可以加载地图中心半径 20 公里内的标记，但只能在网页打开后加载。

任何提示性教程或帮助

Answer 1

1. 在地图对象上绑定center_changed 事件监听器。
2. 创建标记时，将它们推送到数组中（推送每个标记对象）。
3. 在中心更改 (#1) 时，循环遍历您的标记数组并在每个标记上调用 setMap(null)。
4. 使用新的中心坐标再次查询您的数据库。
5. 从 #2 开始再次执行每个步骤

这里有一些快速代码，以便您了解：

// Create an array of markers
var markers = [];

// Create your map and all the stuff you need

// Bind the event listener
google.maps.event.addListener(map, 'center_changed', reloadMarkers);

// Function to reload the markers
function reloadMarkers() {

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

        // Remove each marker from map
        markers[i].setMap(null);
    }

    createMarkers();
}

function createMarkers() {

    // Query your database with the parameters you need
    // Create each marker object (probably within a loop)

    var marker = new google.maps.Marker({
        map: map,
        // Your other marker properties here
    });

    // Push new marker to the markers array
    markers.push(marker);
}

希望这会有所帮助。