在Google Maps API上重新加载标记

Fred 发表于 Dev

弗雷德

这是我的代码（来自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>

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

谢谢你的帮助。

先生先生

您应该做的几件事/与原始代码相比我已经改变的事情：

为标记使用有效的纬度/经度坐标（例如，1121.28747820854187不是有效的经度）
为地图创建全局变量（更易于在脚本中引用）
创建一个数组来保存您的标记
我在标记中添加了标记动画animation: google.maps.Animation.DROP,，以便可以看到它们何时被重新加载，以及一个重新加载标记按钮来调用重新加载功能。

基本上，您想做的是：

在setMarkers函数中创建每个标记
将每个标记推入markers数组
当重装你的标记，遍历您的标记阵列，并呼吁setMap(null)每个标记从地图上删除
完成后，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();