Question

感谢您阅读此内容......

我一直在寻找和试验3天，试图解决一个非常基本的JavaScript问题。

我正在创建一个包含45个标记的Google地图。标记：

使用MarkerClusterer实用程序
打开信息窗（每个显示不同的图像）
当页面加载时，所有“丢弃”很好地到位。

到目前为止一切顺利。

问题是应用“setTimeout”函数按顺序删除标记（而不是一次性删除）。我已经尝试了十几种变体，没有任何效果。

我是一个新手，任何帮助都会非常感激！

您可以在以下位置查看地图的简化版本：

http://www.domatchaworld.com/googlemap6.html

以下是代码：

var locations = [  
[39.11009, -120.03169, '<img width="300" height="239" src="images/img01.jpg" style="margin:5px;"/>'],
[37.77493, -122.41942, '<img width="300" height="239" src="images/img02.jpg" style="margin:5px;"/>'],
[48.85320, 2.30206, '<img width="300" height="239" src="images/img03.jpg" style="margin:5px;"/>'],
[48.77734, -121.81320, '<img width="300" height="239" src="images/img04.jpg" style="margin:5px;"/>'],
[49.35365, -123.26187, '<img width="300" height="239" src="images/img45.jpg" style="margin:5px;"/>']
]; 

var map;
var markers = [];
var mc; 
var mcOptions = {
  gridSize: 20,
  maxZoom: 15
};

map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 3,
center: new google.maps.LatLng(31.65338, -40.42969),
mapTypeId: google.maps.MapTypeId.TERRAIN
});

mc = new MarkerClusterer(map, [], mcOptions);

var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});

var marker;
var i;

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

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][2]);
      infowindow.open(map, marker);
    }
  })(marker, i));

mc.addMarkers(markers, true);

markers.push(marker); //push local var marker into global array

}

Answer 1

不是一次将所有标记添加到MarkerClusterer，而是创建标记数组，然后为它们设置动画（我复制粘贴代码并在最后添加注释...）：

var locations = [
    [39.11009, - 120.03169, '<img width="300" height="239" src="images/img01.jpg" style="margin:5px;"/>'],
    [37.77493, - 122.41942, '<img width="300" height="239" src="images/img02.jpg" style="margin:5px;"/>'],
    [48.85320, 2.30206, '<img width="300" height="239" src="images/img03.jpg" style="margin:5px;"/>'],
    [48.77734, - 121.81320, '<img width="300" height="239" src="images/img04.jpg" style="margin:5px;"/>'],
    [49.35365, - 123.26187, '<img width="300" height="239" src="images/img45.jpg" style="margin:5px;"/>']
];

var map;
var markers = [];
var mc;
var mcOptions = {
    gridSize: 20,
    maxZoom: 15
};

map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 3,
    center: new google.maps.LatLng(31.65338, - 40.42969),
    mapTypeId: google.maps.MapTypeId.TERRAIN
});

mc = new MarkerClusterer(map, [], mcOptions);

var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(map, 'click', function () {
    infowindow.close();
});

var marker;
var i;

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

    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][2]);
            infowindow.open(map, marker);
        }
    })(marker, i));

    //don't add to cluster yet
    //mc.addMarkers(markers, true);

    markers.push(marker); //push local var marker into global array

}

// now animate and add to cluster
(function animateNextMarker() {
  if (markers.length > 0) {
    mc.addMarker(markers.pop(), true);
    setTimeout(animateNextMarker, 250);
  }
})();

希望这会有所帮助：）

setTimeout标记动画 - 似乎没什么用

1 个答案: