由于一个地图中有很多种类型的覆盖物,由于某个覆盖物(一般是自定义)整个地图中只允许出现一次

那第一想到的就是,每次创建这个类型的覆盖物时先清除这一类型的覆盖物,比较简单判断覆盖物的类型 instanceof ,部分代码如下(红色代码为重点 ):

PoiMarker.prototype = new BMap.Overlay();
PoiMarker.prototype.initialize = function (map) {
this._map = map;
const div = this._div = document.createElement("div");
div.style.zIndex = BMap.Overlay.getZIndex(500);
div.style.position = "absolute";
div.style.background = "url(http://s.xxx.com/images/bcg-green.png) no-repeat bottom";
div.style.cursor = "pointer";
div.style.height = "42px";
const img = document.createElement("img");
img.src = this._img
div.style.zIndex = BMap.Overlay.getZIndex(400);
img.style.height = "36px";
img.style.width = "36px";
img.style.borderRadius = "26px";
img.style.border = "2px solid #72b80a";
div.appendChild(img);
// POI点击事件
div.onclick = (e) => {
// 禁止事件冒泡
const oEvent = e || event;
oEvent.cancelBubble = true;
// 删除其它的 poiInfoWindowMarker
//获取地图上所有的覆盖物
const allOverlay = this._map.getOverlays();
for (const item of allOverlay) {
if (item instanceof PoiInfoWindowMarker) {
this._map.removeOverlay(item);
}
}
const poiInfoWindowMarker = new PoiInfoWindowMarker(this._point, this._img);
// 添加节点数覆盖物到地图上(并将覆盖物注册)
this._map.addOverlay(poiInfoWindowMarker);
};
map.getPanes().labelPane.appendChild(div);
return div;
};
PoiMarker.prototype.draw = function () {
const map = this._map;
const pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = (pixel.x - 18) + "px";
this._div.style.top = (pixel.y - 40) + "px";
}; this.poiMarker = PoiMarker

附带一张GIF图解:

*** 百度地图给出了根据label中的content比较后删除覆盖物(不太符合我需要的场景)

http://lbsyun.baidu.com/jsdemo.htm#c1_17

    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;
}
}
}

百度地图JavaScript如何清除指定类型的覆盖物的更多相关文章

  1. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  2. 百度地图JavaScript开发入门先知

    最近项目紧急开发了一些百度地图的功能,觉得百度地图实数强大!于是今天不忙总结一下,看到不错的文章先转载. 文章出处:https://www.opengps.cn/Blog/View.aspx?id=1 ...

  3. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  4. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  5. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  6. 百度地图 JavaScript API 极速版 开发体会

    前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...

  7. 最全面的百度地图JavaScript离线版开发

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5822231.html 项目要求web版百度地图要离线开发.这里总结下自己的开发过程和经验. 大概需求是:每辆 ...

  8. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

  9. 百度地图 javascript相关Bug搜集

    一 在手机里用百度地图js版做webapp   bug集合 1 之前用2.0版本的时候发现只要地图添加了覆盖物,无论数量多少,当地图放大到很小的范围时候,会卡死 1.1 当时处理办法:将版本降低至1. ...

随机推荐

  1. (转)RocketMQ源码学习--消息存储篇

    http://www.tuicool.com/articles/umQfMzA 1.序言 今天来和大家探讨一下RocketMQ在消息存储方面所作出的努力,在介绍RocketMQ的存储模型之前,可以先探 ...

  2. learning uboot auto switch to stanbdy system in qca4531 cpu

    design: when uboot load kerne failed,we can switch to stanbdy system; how to realize: when boot fail ...

  3. sql 判断字符串中是否含有数字和字母

    判断是否含有字母 select PATINDEX('%[A-Za-z]%', ‘ads23432’)=0 (如果存在字母,结果<>1) 判断是否含有数字 PATINDEX('%[0-9]% ...

  4. javascript开发HTML5游戏--斗地主(单机模式part2)

    最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...

  5. Pycharm(三)常用设置

    File - Settings (ctrl+alt+s) python模板 Editor - File and Code Templates - Python Script 可以使用部分变量. # ! ...

  6. 关于CentOS 7 下的Oracle11g的proc编译器的一些常见问题

    1.proc编译器配置问题 在使用proc将.pc文件编译成.c文件时出现一堆的错误,网上的答案七杂八杂的,都没有解决我的问题. 如下是我在使用过程中的一些错误: 由于我可能比较笨,实在是受不了网上那 ...

  7. 全球DEM数据GMT绘制

    http://gmt-china.org/download/

  8. 《JAVA----day01和day02》

    1,(在有符号的情况下)若一个二进制数都是1,则对应的十进制数是-1 2,在定义数值类型时,若无特别说明,整数默认:int  小数默认:double 在内存中 占字节数 取值范围 (1)byte:1个 ...

  9. 深入理解Linux网络技术内幕——用户空间与内核空间交互

    概述:     内核空间与用户空间经常需要进行交互.举个例子:当用户空间使用一些配置命令如ifconfig或route时,内核处理程序就要响应这些处理请求.     用户空间与内核有多种交互方式,最常 ...

  10. apache的日志access_log分析

    正常日志格式:客户端地址 访问者的标识 访问者的验证名字 请求的时间 请求类型 请求的HTTP代码 发送给客户端的字节数   当网站出问题时分析日志,第一步一般都不会是看访问日志.但是也不能忽视它,在 ...