Google Maps API v3 - 带动画的多个点

Question

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

我的工作几乎是我想要的,但我担心它有点慢.我已经异步加载它,但标记有问题.

我希望地图加载然后标记一个接一个地逐个出现在一个下拉动画中.目前有一个延迟,他们都放在一起,有时他们出现在地图上然后下降看起来很奇怪.

我正在使用PHP foreach脚本(来自MYSQL数据库)为成员输出javascript数组 - 地图上可以有10到400个标记,但通常一次不超过100个.

为简洁起见,我在下面的示例中只包含了4个标记(正如我之前所说的,是从PHP foreach脚本输出的):

<script>
var infowindow = null;
$(document).ready(function () { initialize();  });
function initialize() {
    var centerMap = new google.maps.LatLng(53.1,-2.2);
    var myOptions = {
        zoom: 9,
        center: centerMap,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    setMarkers(map, sites);
    infowindow = new google.maps.InfoWindow({
            content: "loading..."
        });
}

 var sites = [
 ['Joe Bloggs',52.1022,-2.1070,1,"Member &nbsp;<a href=\"#\">Joe Bloggs</a>"],                              
 ['Peter Pan',52.2022,-2.2070,1,"Member &nbsp;<a href=\"#\">Peter Pan</a>"],                                
 ['Andrew Andrewson',52.0322,-2.0170,1,"Member &nbsp;<a href=\"#\">Andrew Andrewson</a>"],                              
 ['Peter Peterson',52.0022,-2.0070,1,"Member &nbsp;<a href=\"#\">Peter Peterson</a>"],  
 ];

function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], 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);
        });
    }
}


  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?key=my-key-is-here&sensor=false&' +'callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

如何加快速度并在页面加载后让标记出现在投影中？

Answer 1

TL,DR:链接到演示

在我看来,你将不得不编写自定义动画功能来创建一些光滑的东西.

我开始使用开箱即用的google.maps.Animation.DROP和各种setTimeout设置,但无法提供令人满意的设置.最大的障碍似乎是同时发生的少量标记DROP会迅速降低动画的平滑度,从而导致标记出现难看,波涛汹涌,凌乱的雨水.它甚至撞毁了我的IE7 :(

换句话说,如果你想要一个好看的DROP序列,连续DROP之间的时间延迟需要相对较大(100-200毫秒),而在100个标记处,这意味着等待10到20秒,直到最后一个标记掉落.我认为让最终用户完成整个动画的时间太长了,但如果DROP延迟很短,那么地图的动画看起来不太好.它是动画质量和加载速度之间的平衡.

一种解决方法可能是向地图添加点击侦听器,以便在触发时立即显示剩余的未显示标记.我没有在我的演示中添加这个逻辑.

这是JSFiddle上的演示.有三个变量可供使用,一个控制标记的数量,另外两个控制标记DROP之间的延迟.您可以更改这些值,然后单击 > Run 以查看更改.

一些说明:

1. 我对随机列表进行排序,使标记从上到下掉落.我认为它看起来比标记的零星雨更好.您还可以按距离重写排序函数,以便首先接近预定义中心DROP的站点.

2. 有一个自动执行的匿名函数包装超时,以便为每个标记创建新的变量范围.