百度地圖api清除指定覆蓋物
一、首先在官網api demo有以下例子：（地址：http://lbsyun.baidu.com/jsdemo.htm?a#c1_17）javascript
// 百度地圖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 個；css
言歸正傳：在百度api裏，清除覆蓋物有兩個方法：map.removeOverlay()或者 map.clearOverlays()。而 clearOverlays()方法一次移除全部的覆蓋物，removeOverlay()一次移除一個指定覆蓋物。java
如今個人需求是如圖：ajax
點擊左邊的人員後，右邊對應的人員顯示本身管理的圓圈範圍。同時清除 其餘人員的圓圈區域（也就是說地圖只顯示當前管理員的管理區域），因此每次點擊須要清除已有的圓圈。json
api又提供了另外2個配套的方法：disableMassClear() 和 enableMassClear();api
disableMassClear()：官網文檔解釋 禁止覆蓋物在 map.clearOverlays 方法中被清除。 (自 1.1新增) enableMassClear()：官網文檔解釋 容許覆蓋物在 map.clearOverlays 方法中被清除。 (自 1.1新增)
實現該功能的步驟以下：session
第一步：在添加覆蓋的時候對不須要進行移除操做的覆蓋設置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步，功能就完成了dom
若是如今須要對marker進行移除操做時，可使用enableMassClear()方法來取消禁止清除；async
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/73743785ide
所有代碼：
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);
};
相關文章
- 1. 百度地圖API-覆蓋物
- 2. 百度地圖 ~ 覆蓋物
- 3. 百度地圖API-自定義圖標覆蓋物
- 4. 百度地圖SDK2.0覆蓋物添加
- 5. 高德地圖api--清除覆蓋物（已解決）
- 6. 百度地圖開放API示例整理-覆蓋物
- 7. 百度地圖api-動態添加覆蓋物
- 8. 百度地圖插件 覆蓋物 之定義 美化
- 9. 百度地圖自定義覆蓋物加載時跑偏
- 10. 百度地圖 - 自定義ECharts覆蓋物
- 更多相關文章...
- • 物理地址（MAC地址）是什麼？ - TCP/IP教程
- • PHP 獲取圖像寬度與高度 - PHP參考手冊
- • Docker 清理命令
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 百度地圖API-覆蓋物
- 2. 百度地圖 ~ 覆蓋物
- 3. 百度地圖API-自定義圖標覆蓋物
- 4. 百度地圖SDK2.0覆蓋物添加
- 5. 高德地圖api--清除覆蓋物（已解決）
- 6. 百度地圖開放API示例整理-覆蓋物
- 7. 百度地圖api-動態添加覆蓋物
- 8. 百度地圖插件 覆蓋物 之定義 美化
- 9. 百度地圖自定義覆蓋物加載時跑偏
- 10. 百度地圖 - 自定義ECharts覆蓋物