我喜欢使用谷歌地图创建一个可以处理大量标记(超过10,000)的地图.为了不减慢地图速度,我创建了一个XML文件,它只输出当前视口内的标记.
首先,我使用initialize()来设置地图选项:
function initialize() {
var myLatlng = new google.maps.LatLng(51.25503952021694,3.27392578125);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'tilesloaded', function () {
loadMapFromCurrentBounds(map);
});
}
Run Code Online (Sandbox Code Playgroud)
当事件'tilesloaded'完成后,我使用loadMapFromCurrentBounds(),这个函数将获取当前边界并向XML文件发送请求以显示当前视口内的标记:
function loadMapFromCurrentBounds(map) {
// First, determine the map bounds
var bounds = map.getBounds();
// Then the points
var swPoint = bounds.getSouthWest();
var nePoint = bounds.getNorthEast();
// Now, each individual coordinate
var swLat = swPoint.lat();
var swLng = swPoint.lng();
var neLat = nePoint.lat();
var neLng …Run Code Online (Sandbox Code Playgroud) javascript google-maps google-maps-api-3 google-maps-markers