我正在建立一个成员目录,并按照名称和到城镇或城市的距离列出成员,这些目录将使用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 <a href=\"#\">Joe Bloggs</a>"],
['Peter Pan',52.2022,-2.2070,1,"Member <a href=\"#\">Peter Pan</a>"],
['Andrew Andrewson',52.0322,-2.0170,1,"Member <a href=\"#\">Andrew Andrewson</a>"],
['Peter Peterson',52.0022,-2.0070,1,"Member <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之间的延迟。您可以更改这些值,然后单击>运行以查看更改。
一些注意事项: