1、首先在官网api demo有如下例子：（地址：http://lbsyun.baidu.com/jsdemo.htm?a#c1_17）
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.disableDoubleClickZoom(true);
// 编写自定义函数,创建标注
function addMarker(point,label){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.setLabel(label);
}
// 随机向地图添加25个标注
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 10; i++) {
var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
var label = new BMap.Label("我是id="+i,{offset:new BMap.Size(20,-10)});
addMarker(point,label);
}
function deletePoint(){
var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length -1; i++){
if(allOverlay[i].getLabel().content == "我是id=1"){
map.removeOverlay(allOverlay[i]);
return false;
}
}
}我们会发现 map.getOverlays() 函数会返回 页面 覆盖物的个数+1 个；
言归正传：在百度api里，清除覆盖物有两个方法：map.removeOverlay()或者 map.clearOverlays()。而 clearOverlays()方法一次移除所有的覆盖物，removeOverlay()一次移除一个指定覆盖物。
现在我的需求是如图：
点击左边的人员后，右边对应的人员显示自己管理的圆圈范围。同时清除 其他人员的圆圈区域（也就是说地图只显示当前管理员的管理区域），所以每次点击需要清除已有的圆圈。
api又提供了另外2个配套的方法：disableMassClear() 和 enableMassClear();
disableMassClear()：官网文档解释 禁止覆盖物在 map.clearOverlays 方法中被清除。 (自 1.1新增)
enableMassClear()：官网文档解释 允许覆盖物在 map.clearOverlays 方法中被清除。 (自 1.1新增)实现该功能的步骤如下：
第一步：在添加覆盖的时候对不需要进行移除操作的覆盖设置disableMassClear();
marker.setLabel(label);
this.map.addOverlay(marker);//增加点
marker.disableMassClear(); //mark不被清除
第二步：清除所要清除的覆盖物，这里需要清除所有的Polyline而不清除marker，现在可以直接使用
var circle = new BMap.Circle(poi,dis,{fillColor:"blue", strokeWeight: 1 ,fillOpacity:
0.3,strokeOpacity: 0.3});
this.map.clearOverlays();
this.map.addOverlay(circle);
只需2步，功能就完成了
如果现在需要对marker进行移除操作时，可以使用enableMassClear()方法来取消禁止清除；
var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length; i++) {
allOverlay[i].enableMassClear();
return false;
};参考：http://blog.csdn.net/frees_zhu/article/details/73743785
全部代码：
window.visualMonitor ={
path:$("#path").val(),
map:new BMap.Map("bdMap"),
initMapBdMap:function(){//初始地图高度
var mapHeight = $(window).height() - 85;
$("#bdMap").css({"height":mapHeight});
$("#treeContainer").niceScroll({
cursoropacitymin: 0,
cursoropacitymax: 1,
zindex:99,
cursorwidth: "5px",
cursorborder: "none",
cursorborderradius: "5px"
});
},
initAnimHeight:function(){
$(".okps-container-l").css({"pointer-events":"none","background":"transparent"});
$(".okps-container-l-logo").css({"background": "rgba(1,21,36,0.8)"});
$("#reguAnimateBox").css({"height":$(window).height() - 48 +"px"});
},
sideAnimate:function(){
$("#animateArrow").click(function(){
if($(this).attr("data-status") == "0"){
$("#reguAnimateBox").animate({left:"-180px"},1000,function(){
$("#animateArrow").addClass("see-animate-box-arrow-s");
$("#animateArrow").animate({right:"-30px"},1000,function(){
$(this).addClass("see-animate-box-arrow-s");
});
});
$(".okps-container-r-content").animate({position:"relative",paddingLeft:"10px"},1000);
$(this).attr("data-status","1");
}else{
$("#reguAnimateBox").animate({left:"0px"},1000,function(){
$("#animateArrow").removeClass("see-animate-box-arrow-s");
$("#animateArrow").animate({right:"0px"},1000);
});
$(".okps-container-r-content").animate({position:"relative",paddingLeft:"190px"},1000);
$(this).attr("data-status","0");
}
});
},
leftTreeFill:function(){
$.ajax({
url:'/okps/visual/getAllClass',
type:'post',
dataType:'json',
data:{},
success: function(data){ //成功
var InitData = {};
InitData.data = data;
$("#treeContainer").treeStru(InitData);
},
error: function(){ //失败
layer.alert('统计分析数据加载失败，可能会导致页面显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
},
siberClick:function(lng,lat){ //左边点击
this.point = new BMap.Point(lng,lat);
this.map.centerAndZoom(this.point,20);
return;
},
initMap:function(){//初始化地图
this.map.enableScrollWheelZoom(true);//鼠标放缩地图
//添加控件和比例尺
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
this.map.addControl(top_right_navigation);
},
moveGetData:function(){
var _this = this;
this.map.addEventListener("dragend", function(){
var center = this.map.getCenter();
_this.map.clearOverlays();
$("#keywords").empty();
_this.getStation(center.lng,center.lat);
}.bind(this));
},
getCity:function(){//获取当前地点名
var _this = this;
$.ajax({
url : _this.path + "user/getCurrentCity",
type : 'post',
dataType : 'json',
async : false,
error : function() { // 失败
layer.alert('统计分析数据加载失败，可能会导致页面显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
},
success : function(data) {
_this.initialCityName = data.city;
}
});
},
getSingleNum:function(){
$.ajax({
url : this.path + "visual/getSumbyType",
type : 'post',
dataType : 'json',
async : false,
error : function() { // 失败
layer.alert('统计分析数据加载失败，可能会导致页面显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
},
success : function(data) {
data.forEach(function(item,index,array){
if(item.type == '1'){
$("#beHere").text(item.ct);
}else if(item.type == '2'){
$("#goAway").text(item.ct);
}else{
$("#master").text(item.ct);
}
});
}
});
},
firstLoad:function(){//第一次进入该页面
var _this = this;
this.getCurrentCenter(_this.initialCityName);
},
getCurrentCenter:function(city){//获取当前中心点
layer.load(2, { shade: [0.3, '#393D49'] });
var _this = this;
$("#keywords").empty();
var localSearch = new BMap.LocalSearch(_this.map);
_this.map.clearOverlays();//清空原来的标注
var keyword = city;
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
//console.log(poi);
if(!poi){
setTimeout(function(){
layer.closeAll('loading');
},300);
return;
};
_this.point = new BMap.Point(poi.point.lng,poi.point.lat);
_this.map.centerAndZoom(_this.point,17);
//console.log(poi.point.lng + "," + poi.point.lat);//搜索中心点
//获取搜索地点附近 站点数据
//泊位
_this.getStation(poi.point.lng,poi.point.lat);
});
localSearch.search(keyword);
},
getStation:function(lng,lat){//传入当前经纬度获取岗位数据
var _this = this;
$.ajax({
url : _this.path + "visual/getAllUserByAgent",
type : 'post',
dataType : 'json',
async : false,
data : {
},
beforeSend : function(){
},
error : function() { // 失败
layer.alert('数据加载失败，可能会导致页面显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
},
success : function(data) {
/*alert();*/
// console.log(data);
if(data.length <= 0){
$("#gwToTotal").text(0);
setTimeout(function(){
layer.closeAll('loading');
},300);
return;
};
setTimeout(function(){
layer.closeAll('loading');
},300);
var array = new Array();
for ( var i = 0; i < data.length; i++) {
array[i] = new Array();
array[i][0] = data[i].lng * 1;
array[i][1] = data[i].lat * 1;
array[i][2] = data[i].className;
array[i][3] = data[i].classId;
array[i][4] = data[i].name;
array[i][5] = data[i].phone;
array[i][6] = data[i].isOut;
array[i][7] = data[i].usertype;
array[i][8] = data[i].groupName;
array[i][9] = data[i].id;
array[i][10] = data[i].sbTime.slice(0,-2);
array[i][11] = data[i].distance;
}
_this.initStation(array);
}
});
},
circleFun:function(poi,dis){
var circle = new BMap.Circle(poi,dis,{fillColor:"#f3a08c", strokeWeight: 0.3 ,fillOpacity: 0.3, strokeOpacity: 0.3});
this.map.clearOverlays();
this.map.addOverlay(circle);
},
initStation:function(data){//初始岗位数据
var _this = this;
var json_data = data;
var pointArray = new Array();
var opts = {
width : 200,
height: 140,
enableMessage:true
};
for(var i=0;i<json_data.length;i++){
var myIcon;
if(json_data[i][7] == '7'){
myIcon = new BMap.Icon("/okps/images/ry02.png", new BMap.Size(28,40));
}else{
if(json_data[i][6] == '1'){
myIcon = new BMap.Icon("/okps/images/ry03.png", new BMap.Size(28,40));
}else{
myIcon = new BMap.Icon("/okps/images/ry04.png", new BMap.Size(28,40));
}
}
var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1]),{icon:myIcon}); // 创建点
var content = '<div class="map-gw-h">员工：'+json_data[i][4]+'</div>';
content +='<div class="map-gw-h">班组：'+json_data[i][2]+'</div>';
if(json_data[i][7] != '7'){
content +='<div class="map-gw-h nowrap">岗位：'+nullReturn(json_data[i][8])+'</div>';
};
content +='<div class="map-gw-h">手机：'+json_data[i][5]+'</div>';
content +='<div class="map-gw-h">上班时间：'+json_data[i][10]+'</div>';
if(json_data[i][7] == '7'){
content +='<div class="map-gw-h"><a href="/okps/visual/supervisionr/index?id='+json_data[i][9]+'" onclick=sessionJump("2_null",128,2) class="a-do" style="float:right;">查看运动轨迹</a></div>';
};
pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
var label = new BMap.Label(json_data[i][4],{offset:new BMap.Size(-15,-30)});//创建文本标注对象
label.setStyle({
border:"1px solid #5291fc",
color : "#ffffff",
background:"#5291fc",
overflow:"hidden",
padding: "2px 5px",
borderRadius:"5px",
fontSize : "12px",
height : "20px",
lineHeight : "20px",
fontFamily:"微软雅黑"
});
marker.setLabel(label);
this.map.addOverlay(marker);//增加点
marker.disableMassClear();
var dis={lng:json_data[i][0],lat:json_data[i][1],disdance:json_data[i][11]};
_this.addClickHandler(content,label,opts,dis);
_this.addClickHandler(content,marker,opts,dis);
}
//让所有点在视野范围内
//this.map.setViewport(pointArray);
},
getMonitor:function(id){
var _this = this;
var monitor=[];
$.ajax({
url : _this.path + "sup/getUsersListByGroupId",
type : 'post',
dataType : 'json',
async : false,
data : {"groupId":id},
beforeSend : function(){
},
error : function() { // 失败
layer.alert('数据加载失败，可能会导致页面显示异常，请刷新后重试', {
skin: 'layui-layer-molv'
, closeBtn: 0
, shift: 4 //动画类型
});
},
success : function(data) {
if(data.length > 0){
if(data[0].sbsfy != undefined){
monitor.push(data[0].sbsfy);
}
if(data[0].wsbsfy != undefined){
monitor.push(data[0].wsbsfy);
}
if(data[0].sbbz != undefined){
monitor.push(data[0].sbbz);
}
if(data[0].wsbbz != undefined){
monitor.push(data[0].wsbbz);
}else{
monitor.push('');
}
}
}
});
return monitor;
},
addClickHandler:function(content,marker,opts,dis,id){
var _this = this;
marker.addEventListener("click",function(e){
var mPoint = new BMap.Point(dis.lng, dis.lat);
var circle = new BMap.Circle(mPoint,dis.disdance,{fillColor:"#f3a08c", strokeWeight: 0.3 ,fillOpacity: 0.3, strokeOpacity: 0.3});
_this.map.clearOverlays();
_this.map.addOverlay(circle);
_this.map.centerAndZoom(mPoint,20);
_this.openInfo(content,e,opts,id)}
);
},
openInfo:function(content,e,opts,id){
var _this = this;
var p = e.target;
if(id){
var monitorA = this.getMonitor(id);
content +='<div class="map-gw-h" style="margin-bottom:5px;">'+'<img src="/okps/images/bm09.png" alt="" />'+monitorA[0]+'<img src="/okps/images/ew.png" alt="" />'+monitorA[1]+'</div>';
content +='<div class="map-gw-h">班长</div>';
if(monitorA[3] != ''){
content +='<div class="map-gw-h"><img src="/okps/images/bm09.png" alt="" />'+monitorA[2]+'<img src="/okps/images/ew.png" alt="" />'+monitorA[3]+'</div>';
}else{
content +='<div class="map-gw-h"><img src="/okps/images/bm09.png" alt="" />'+monitorA[2]+'</div>';
}
}
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
_this.map.openInfoWindow(infoWindow,point); //开启信息窗口
},
init:function(){
this.getSingleNum();
this.initAnimHeight();
$(window).resize(this.initAnimHeight);
this.sideAnimate();
this.leftTreeFill();
this.getCity();
this.initMapBdMap();
this.firstLoad();
this.initMap();
//this.moveGetData();
}
};
$(function(){
visualMonitor.init();
});
//获取覆盖物位置
function attribute(e){
var p = e.target;
console.log(p.getPosition().url);
alert(p.getPosition().lng + "," + p.getPosition().lat);
};