因此,我要在网站的所有页面上设置动态Google地图,以显示您在每个页面上可以看到的位置,以帮助用户了解这些位置。
它可以工作,但工作速度非常慢,速度很慢,如果它有大约40+,加载地图可能需要大约1分钟,如果它的位置多于页面上的位置,它就会卡住没有加载地图。
以下是查看地图的链接: http://www.exchange-currency.org/wakefield/
这里是网站上的代码,你也可以看到带有视图源的代码,但注意地址是来自php的字符串,你可以看到页面视图源代码的输出
<script type="text/javascript" src="http://maps.google.com/maps/api/js?q=<?php the_title(); ?>&key=AIzaSyDeyknfWm0qmejgXZh_VXihNcHbidewODQ"></script>
<script type="text/javascript">
var delay = 10;
var infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng();
var mapOptions = {
zoom: 4,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
function geocodeAddress(address, next) {
geocoder.geocode({address:address}, function (results,status)
{
if (status == google.maps.GeocoderStatus.OK) {
var p = results[0].geometry.location;
var lat=p.lat();
var lng=p.lng();
createMarker(address,lat,lng);
}
else {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay++;
} else {
}
}
next();
}
);
}
function createMarker(add,lat,lng) {
var contentString = add;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
bounds.extend(marker.position);
}
var locations = [<?php echo $locationAddresses; ?>];
var nextAddress = 0;
function theNext() {
if (nextAddress < locations.length) {
setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
map.fitBounds(bounds);
}
}
theNext();
</script>
我该怎么做才能让它以正常速度运行,以便它实际可用?
这是指向包含更多位置的网页的链接,因此您可以看到我在谈论的内容: http://www.exchange-currency.org/montreal/
谢谢!
编辑:
此外,如果有一种方法可以让它加载异步并且使用群集而不是多个标记来表示很好,那么似乎无法弄清楚= /