Question

我尝试使用addMarker函数在页面加载时加载大约600个googlemap标记。

该页面需要花费大量时间才能加载。

在继续使用addMarker函数的同时，我能做些什么来加快加载速度？

感谢。

var map
var myLatlng = new google.maps.LatLng(35.9531719,14.3712201);
var markerBounds = new google.maps.LatLngBounds();
var markers = {};
	
function HomeControl(controlDiv, map) 
{
	google.maps.event.addDomListener(zoomout, "click", function() {
		
	   var currentZoomLevel = map.getZoom();
	   if(currentZoomLevel != 0)
	   {
		 map.setZoom(currentZoomLevel - 1);
	   }     
	});
	
	google.maps.event.addDomListener(zoomin, "click", function() {
		
	   var currentZoomLevel = map.getZoom();
	   if(currentZoomLevel != 21)
	   {
		 map.setZoom(currentZoomLevel + 1);
	   }
	});
}

function initialize() 
{
  var googleMapOptions = {
    center: new google.maps.LatLng(35.9531719,14.3712201),
	zoom: 11,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	zoomControl: false,
	streetViewControl: false,
	panControl: false,
	draggable: true
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions);
  
  	google.maps.event.addListener(map, "idle", function() {
  		addMarker(latitude,longitude,id,'Title','url');
  	}); 
  
  var homeControlDiv = document.createElement("div");
  var homeControl = new HomeControl(homeControlDiv, map);
}

 var infowindow = new google.maps.InfoWindow({
    	content: ""
	});

 function addMarker(lat,long,id,desc,url) 
 {	
	var myIcon = new google.maps.MarkerImage("/images/pips/"+id+".png", null, null, null, new google.maps.Size(28,38));
 
    var myLatlng = new google.maps.LatLng(lat,long);

	var marker = new google.maps.Marker({
		map: map,
		title: desc,
		position: myLatlng,
		icon: myIcon,						
		id: id
	});
	
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent('<a href="' + url + '">' + desc + '</a>');
		infowindow.setPosition(marker.getPosition());
		infowindow.open(map, marker); 
	});
	
	markers[id] = marker;

	markerBounds.extend(myLatlng);
	
	google.maps.event.addListener(marker, "click", function() {
		infowindow.open(map,marker);
	});
 }	
 
 google.maps.event.addDomListener(window, "load", initialize);
</script>

Answer 1

您可以使用clustering，将邻居标记合并为一个，并仅在缩放

上展开

您可以在客户端和服务器端进行群集，具体取决于标记的数量......

如果金额超过4000，我建议使用服务器群集，否则客户端应该看起来很好

Google Maps API加载速度很慢，标记很多

1 个答案: