setTimeout标记动画 - 似乎没有任何工作 [英] setTimeout marker animation - nothing seems to work
问题描述
感谢您阅读本文...
我一直在寻找并尝试3天，试图解决一个非常基本的javascript问题。
我使用45个标记创建Google地图。标记：
- 使用MarkerClusterer实用程序进行聚集 可以点击
- 打开一个infowindow（每个人都显示不同的图像）
- 当页面加载时，所有的下降都很好地放置到位。
到目前为止好。
问题在于应用setTimeout 功能可以顺序放置标记（而不是一次全部放置）。我已经尝试了十几个变种，没有任何作用。
我是一个总新手，任何帮助都将非常感激！
您可以在以下网址查看地图的简化版：
http://www.domatchaworld.com/googlemap6.html
以下是代码：
var locations = [
[39.11009，-120.03169，'< img width =300height =239src =images / img01.jpgstyle =margin：5px;/>']，
[37.77493，-122.41942，'< img width =300height =239src =images / img02.jpg style =margin：5px;/>']，
[48.85320，2.30206，'< img width =300height =239src =images / img03.jpgstyle = margin：5px;/>']，
[48.77734，-121.81320，'< img width =300height =239src =images / img04.jpgstyle =margin：5px ;/>']，
[49.35365，-123.26187，'< img width =300height =239src =images / img45.jpgstyle =margin：5px;/ >']
]。
var map;
var markers = [];
var mc;
var mcOptions = {
gridSize：20，
maxZoom：15
};
$ b $ 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;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （位置[i] [0]，位置[i] [1]），
动画：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）; //将局部var标记推入全局数组
$ div $解析方案 不是一次性向 MarkerClusterer 添加所有标记，而是创建标记数组，然后为它们设置动画（我复制粘贴了你的代码并添加了最后的评论...）：
$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $' img width =300height =239src =images / img01.jpgstyle =margin：5px;/>']，
[37.77493， - 122.41942，'< img width = 300height =239src =images / img02.jpgstyle =margin：5px;/>']，
[48.85320，2.30206，'< img width =300height =239src =images / img03.jpgstyle =margin：5px;/>']，
[48.77734， - 121.81320，'< img width =300height =239 src =images / img04.jpgstyle =margin：5px;/>']，
[49.35365， - 123.26187，'< img width =300height =239src = images / img45.jpgstyle =margin：5px;/>']
];
var map;
var markers = [];
var mc;
var mcOptions = {
gridSize：20，
maxZoom：15
};
$ b $ 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;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （位置[i] [0]，位置[i] [1]），
动画：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）; //将局部var标记推入全局数组
$ b $ //现在动画并添加到集群
（函数animateNextMarker（）{
if（ marker.length> 0）{
mc.addMarker（markers.pop（），true）;
setTimeout（animateNextMarker，250）;
}
}）（）;
希望这有助于：）
Thanks for reading this ...
I've been searching and experimenting for 3 days trying to solve a pretty basic javascript issue.
I'm creating a Google map with 45 markers. The markers:
- are clustered using the MarkerClusterer utility
- can be clicked to open an infowindow (each one displays a different image)
- all "drop" nicely into place when the page loads.
So far so good.
The problem is applying a "setTimeout" function to drop the markers sequentially (instead of all at once). I've tried a dozen variations, nothing works.
I'm a total novice, any help would be hugely appreciated!
You can view a simplified version of the map at:
http://www.domatchaworld.com/googlemap6.html
Here is the code:
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
}
Instead of adding all markers to the MarkerClusterer at once, create your array of markers, then animate them (I've copy pasted your code and added comments at the end...):
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);
}
})();
Hope this helps :)
这篇关于setTimeout标记动画 - 似乎没有任何工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
