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

如果您的页面加载时间很长，您可以选择使用 callback 异步加载 Google Maps API，该callback 可以定义为加载 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);
}

这将允许您保留现有的 initialize 函数，该函数将在 Google Maps JavaScript 库完全加载后运行，但您需要删除当前在您的 $(document).ready 中的对 initialize() 的调用，所以它不会运行两次。

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

根据后续评论编辑：

如果您想创建所有标记，可以在 JavaScript 中使用，但在每个标记创建之间添加延迟是 JavaScript setTimeout( function, delayInMilliseconds 函数。您必须在调用期间跟踪您在标记数组中的位置，但它可以将工作划分为不同的工作单元。使用setTimeout，您应该能够在每个标记放置之间添加一个短暂的延迟，这应该会给您想要达到的效果。

Answer 2

要按时间间隔创建标记，您可以使用 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);
                        });

                }

Answer 3

TL、DR：link to demo

在我看来，您将不得不编写自定义动画函数来创建一些漂亮的东西。

我使用了开箱即用的 google.maps.Animation.DROP 和各种 setTimeout 设置，但无法找到令人满意的设置。最大的障碍似乎是同时发生的少量标记 DROP 会迅速降低动画的平滑度，从而导致丑陋、波涛汹涌、凌乱的标记雨。它甚至让我的 IE7 崩溃了 :(

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

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

这是demo on JSFiddle。可以使用三个变量，一个控制标记的数量，另外两个控制标记 DROP 之间的延迟。您可以更改这些值，然后单击 > 运行 以查看更改。

一些注意事项：

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

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