在Google地图上动态加载标记

Question

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

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

任何具有启发性的教程或帮助

Answer 1

1. 在地图对象上绑定center_changed事件侦听器。
2. 创建标记时，将它们推入数组（推入每个标记对象）。
3. 在中心更改（＃1）上，循环遍历您的markers数组，并在每个marker上调用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);
}

希望这可以帮助。