在Google的Maps 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>

我只想重新加载标记.我尝试使用初始化函数重新加载地图,但它不起作用.然后我尝试使用setMarkers函数重新加载,但仍然没有运气...

谢谢你的帮助.

Answer 1

您应该做的事情很少/我从原始代码中更改的内容:

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

基本上你想要做的是:

1. 在setMarkers函数中创建每个标记
2. 将每个标记推送到markers阵列
3. 当重装通过您的标记阵列的标记,循环,并呼吁setMap(null)每个标记从地图上删除
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