我正在建立一个成员目录,并按照名称和到城镇或城市的距离列出成员,这些目录将使用Google Maps API v3显示在 map 上。

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

我希望 map 加载,然后标记迅速连续地在拖放动画中出现。此刻有一个延迟,它们都放在一起,有时它们出现在 map 上,然后掉下来,看起来很奇怪。

我正在使用PHP foreach脚本(从MYSQL数据库)输出成员的javascript数组- map 上可以有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>

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

最佳答案

TL,DR:link to demo

我认为,您将必须编写自定义动画函数来创建一些漂亮的东西。

我试用了现成的google.maps.Animation.DROP和各种setTimeout设置,但无法提供令人满意的设置。最大的障碍似乎是一下子发生的少数标记DROP迅速降低了动画的平滑度,从而导致标记的丑陋,断断续续,凌乱不堪。它甚至使我的IE7崩溃了:(

换句话说,如果您想要一个良好的DROP序列,则连续DROP之间的时间延迟需要相对较大(100-200毫秒),并且对于100个标记,这意味着要等待10至20秒,直到最后一个标记掉落。我认为让最终用户坐在整个动画中太久了,但是如果DROP延迟很短,则 map 的动画看起来就不好了。这是动画质量和加载速度之间的平衡。

一种解决方法是将点击侦听器添加到 map ,以便在触发时立即显示其余未显示的标记。我没有在演示中添加此逻辑。

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

一些注意事项:

  • 我对随机列表进行排序,以便标记从上到下下降。我认为它看起来比标记笔的零星雨要好。您还可以按距离重写排序功能,以使站点首先靠近预定义的中心DROP。
  • 有一个自动执行的匿名函数,用于包装超时,以便为每个标记创建新的变量作用域。
  • 09-17 16:03
    查看更多