Javascript 谷歌地图API v3-多点动画

我正在建立一个成员目录，该目录以及按名称和距离城镇或城市的顺序列出的成员，将使用Google Maps API v3显示在地图上

我已经让它几乎按照我想要的方式工作，但我担心它有点慢。我已经异步加载了它，但是标记有问题

我希望加载贴图，然后快速连续地在放置动画中逐个显示标记。目前有一个延迟，他们都一起下降，有时他们出现在地图上，然后下降，这看起来很奇怪

我使用一个PHP foreach脚本（来自MYSQL数据库）为成员输出javascript数组——地图上可以有10到400个标记，但一次通常不超过100个

为了简洁起见，我在下面的示例中只包含了4个标记（正如我前面所说的，它是从PHP foreach脚本输出的）：

var infowindow=null；
$（document）.ready（函数（）{initialize（）；}）；
函数初始化（）{
var centerMap=newgoogle.maps.LatLng（53.1，-2.2）；
变量myOptions={
缩放：9，
中心：中心地图，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
设置标记（地图、地点）；
infowindow=新建google.maps.infowindow({
内容：“正在加载…”
});
}
变量站点=[
[Joe Bloggs'，52.1022，-2.1070,1，“成员”]，
['Peter Pan'，52.2022，-2.2070,1，“成员”]，
['Andrew Andrewson'，52.0322，-2.0170,1，“成员”]，
['Peter Peterson'，52.0022，-2.0070,1，“成员”]，
];
函数集合标记（映射、标记）{
对于（var i=0；i

---

如何加快加载速度并在加载页面后使标记显示在拖放动画中？

如果加载页面需要很长时间，您可以选择使用

回调异步加载Google Maps API，该回调可以定义为加载Google Maps JavaScript库的URL上的参数：

<script>
window.onload = loadGoogleMaps;

function loadGoogleMaps() {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.src =    
     "http://maps.googleapis.com/maps/api/jssensor=false&callback=initialize";
   document.body.appendChild(script);
}


window.onload=loadGoogleMaps；
函数loadGoogleMaps（）{
var script=document.createElement（“脚本”）；
script.type=“text/javascript”；
script.src=
"http://maps.googleapis.com/maps/api/jssensor=false&callback=initialize";
document.body.appendChild（脚本）；
}

这将允许您保留现有的
initialize
函数，该函数将在Google Maps JavaScript库完全加载后运行，但您需要删除当前在
$（文档）中对
initialize（）
的调用。ready
，这样它就不会运行两次

您不应该看到一个两步过程，即标记放置在地图上，然后是
放置
动画。您可能还想查看
setMarkers
函数运行所需的时间，因为如果运行时间过长，可能是您所描述的问题的根本原因

根据后续评论进行编辑：
如果您想创建所有标记，但在每个标记创建之间添加一个延迟，则可以在JavaScript中使用JavaScript
setTimeout（函数，delayinmillides
函数。您必须在调用之间跟踪您在标记数组中的位置，但将工作划分为不同的工作单元是可行的。使用
setTimeout
，您应该能够在每个标记放置之间添加一个短的延迟，这应该会给您带来想要达到的效果ve.
要按时间间隔创建标记，可以使用window.setTimeout（），例如：

//UNTESTED!!
            function setMarkers(map, markers) {
                   while (markers.length) {
                    var markerData = markers.shift();
                    window.setTimeout(function(){doSetMarker(markerData,map)},10);// 10 miliseconds. (play with this value).
                    }
                }

                function doSetMarker(markerData,map) {
                    var sites = markerData;
                    var siteLatLng = new google.maps.LatLng(parseFloat(sites[1]), parseFloat(sites[2]));
                    var marker = new google.maps.Marker({
                        position: siteLatLng,
                        map: map,
                        title: sites[0],
                        zIndex: sites[3],
                        html: sites[4],
                        animation: google.maps.Animation.DROP
                    });
                        var contentString = "Some content";
                        google.maps.event.addListener(marker, "click", function () {
                            infowindow.setContent(this.html);
                            infowindow.open(map, this);
                        });

                }

TL，DR：

在我看来，你将不得不编写自定义动画函数来创建一些光滑的东西

我使用了现成的google.maps.Animation.DROP和各种
setTimeout
设置，但无法提供令人满意的设置。最大的障碍似乎是，一次出现少量标记掉落会迅速降低动画的平滑度，导致一场丑陋、起伏、凌乱的标记雨。甚至我的IE7崩溃了：(

换言之，如果您想要一个好看的下降序列，则连续下降之间的时间延迟需要相对较大（100-200毫秒），在100个标记处，这意味着等待10到20秒，直到最后一个标记掉落。我认为让最终用户坐在整个动画中太长了，但是如果掉落延迟很短，地图的动画看起来就不好。这是动画质量和加载速度之间的平衡

一种解决方法是在地图上添加一个点击监听器，这样当触发时，剩下的未显示的标记会立即显示出来

这里是。有三个变量可以使用，一个控制标记的数量，另两个控制dela
//UNTESTED!!
            function setMarkers(map, markers) {
                   while (markers.length) {
                    var markerData = markers.shift();
                    window.setTimeout(function(){doSetMarker(markerData,map)},10);// 10 miliseconds. (play with this value).
                    }
                }

                function doSetMarker(markerData,map) {
                    var sites = markerData;
                    var siteLatLng = new google.maps.LatLng(parseFloat(sites[1]), parseFloat(sites[2]));
                    var marker = new google.maps.Marker({
                        position: siteLatLng,
                        map: map,
                        title: sites[0],
                        zIndex: sites[3],
                        html: sites[4],
                        animation: google.maps.Animation.DROP
                    });
                        var contentString = "Some content";
                        google.maps.event.addListener(marker, "click", function () {
                            infowindow.setContent(this.html);
                            infowindow.open(map, this);
                        });

                }