javascript - 在 Google 的 map API 上重新加载标记

Question

这是我的代码(大部分代码来自 Google 的 API 页面)。

<script>
    var beaches = [
      ['Bondi Beach', -12.890542, 120.274856, 4],
      ['Coogee Beach', -12.923036, 520.259052, 5],
      ['Cronulla Beach', -12.028249, 1221.157507, 3],
      ['Manly Beach', -12.80010128657071, 1121.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 121.259302, 1]
    ];

    function setMarkers(map, locations) {
      for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: beach[0],
            zIndex: beach[3]
        });
      }
    }

    function initialize() {
      var mapOptions = {
        zoom: 3,
        center: new google.maps.LatLng(38.77417, -9.13417),
        mapTypeId: google.maps.MapTypeId.SATELLITE
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);

      setMarkers(map, beaches);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    setInterval(function() { setMarkers(map, beaches); }, 5000);

</script>

我只想重新加载标记。我尝试使用初始化函数重新加载 map ，但没有成功。然后我尝试使用 setMarkers 函数重新加载，但仍然没有运气......

感谢您的帮助。

Answer 1

你应该做的一些事情/我从你的原始代码中改变的事情:

1. 为您的标记使用有效的纬度/经度坐标(例如 1121.28747820854187 不是有效的经度坐标)
2. 为您的 map 创建一个全局变量(更容易在您的脚本中引用)
3. 创建一个数组来保存你的标记
4. 我已将标记动画 animation: google.maps.Animation.DROP, 添加到您的标记中，以便您可以看到它们何时重新加载，以及 重新加载标记 调用重新加载函数的按钮。

基本上你想做的是:

1. 在 setMarkers 函数中创建每个标记
2. 将每个标记推送到markers 数组
3. 当重新加载您的标记时，遍历您的标记数组并在每个标记上调用 setMap(null) 以将其从 map 中删除
4. 完成后，再次调用 setMarkers 重新绘制标记

更新后的代码:

var map;
var markers = []; // Create a marker array to hold your markers
var beaches = [
    ['Bondi Beach', 10, 10, 4],
    ['Coogee Beach', 10, 11, 5],
    ['Cronulla Beach', 10, 12, 3],
    ['Manly Beach', 10, 13, 2],
    ['Maroubra Beach', 10, 14, 1]
];

function setMarkers(locations) {

    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: beach[0],
            zIndex: beach[3]
        });

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

function reloadMarkers() {

    // Loop through markers and set map to null for each
    for (var i=0; i<markers.length; i++) {

        markers[i].setMap(null);
    }

    // Reset the markers array
    markers = [];

    // Call set markers to re-add markers
    setMarkers(beaches);
}

function initialize() {

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(10,12),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    setMarkers(beaches);

    // Bind event listener on button to reload markers
    document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
}

initialize();

工作示例:

JSFiddle demo