百度地图标注批量管理：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<title>百度地图标注管理器</title>
</head>
<body>
<div style="width:550px;height:450px;border:1px solid gray;" id="container"></div>
<button id="clearMarkers">clearMarkers</button>
<button id="show">show markers</button>
<button id="hide">hide markers</button>
<button id="toggle">toggle markers</button>
<script type="text/javascript" src="MarkerManager.js"></script>
<script type="text/javascript">
//初始化地图
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point,15);
map.enableScrollWheelZoom();
var padding = 200;
var mgr = new BMapLib.MarkerManager(map,{
borderPadding: padding
,maxZoom: 18
,trackMarkers: true
});
//定义不同缩放比例下显示的marker数量
var markersConfig = [{minZoom: 1, maxZoom: 10, markerCount:80 }
,{minZoom: 11, maxZoom: 12, markerCount:10 }
,{minZoom: 13, maxZoom: 15, markerCount:150 }
,{minZoom: 16, maxZoom: 17, markerCount:10 }
,{minZoom: 18, maxZoom: 19, markerCount:100 }
];
//为每个不同缩放比例下创建marker
for(var i in markersConfig){
var t = markersConfig[i];
var mks = getRandomMarker(map,t.markerCount,padding);
//增加不同缩放比例的marker
mgr.addMarkers(mks,t.minZoom,t.maxZoom)
}
mgr.showMarkers();
map.addEventListener("zoomend",function(){
console.log('监听缩放');
});
map.addEventListener("dragend",function(){
console.log('监听地图拖拽');
});
$("clearMarkers").onclick = function(){
mgr.clearMarkers();
}
$("show").onclick = function(){
mgr.show();
}
$("hide").onclick = function(){
mgr.hide();
}
$("toggle").onclick = function(){
mgr.toggle();
}
/**
* 随机生成marker
* @param {Map} map 地图map对象
* @param {Number} num 要产生的marker的数量
* @param {Boolean} isInViewport 是否需要只在视口中的marker
* @return {Array} marker的数组集合
*/
function getRandomMarker(map,num,borderPadding){
var container = map.getContainer()
, markers = []
, height = parseInt(container.offsetHeight,10) / 2 + borderPadding
, width = parseInt(container.offsetWidth,10) / 2 + borderPadding;
var center = map.getCenter(), pixel = map.pointToPixel(center);
var realBounds = mgr._getRealBounds();
//随机一个新的坐标，不超过地图+borderPadding范围
for(var i = num; i--;){
var w = width * Math.random(), h = height * Math.random();
var newPixel = { x : pixel.x + (Math.random() > 0.5 ? w : -w),
y : pixel.y + (Math.random() > 0.5 ? h : -h)}
, newPoint = map.pixelToPoint(newPixel);
var marker = new BMap.Marker(newPoint);
if(realBounds.containsPoint(newPoint)){
markers.push(marker);
(function(mk){
mk.addEventListener("dblclick",function(){
mgr.removeMarker(mk);
});
})(marker);
}
}
return markers;
}
/**
* 根据id获取dom元素
* @param {String} id 元素ID
* @return none
*
*/
function $(id){
return document.getElementById(id);
}
</script>
</body>
</html>
