百度地图，百度地图自定义覆盖物物为什么清除不了

来源：蜘蛛抓取(WebSpider) 时间：2017-10-23 15:29 标签： 百度地图自定义覆盖物
百度地图去掉marker覆盖物或者去掉maker的label文字_心得技巧_动态网站制作指南
百度地图去掉marker覆盖物或者去掉maker的label文字
来源：人气：1046
var marker = new BMap.Marker(...);
map.removeOverlay(marker);//方法1
//marker.remove();//方法2
//如果是Marker设置的setLabel还可以设置其样式来隐藏
//mapComponent.state.bikeMarkLabel.setStyle({//方法3
// display:&none&
这里有个坑，就是如果页面要渲染很多的marker，很可能会循环一个数组，如果这段逻辑处于循环中，每次marker或者label都是通过BMapnew出来的，那么就会清除不掉。
仔细想一下就会发现，上次循环渲染的Mark对象已经被释放掉了，最新一次是新new出来的，所以无效。
另外建议使用方法1和方法2，方法3只是隐藏而不是清楚，重复造作会在地图叠加多个覆盖物
优质网站模板百度地图api小技巧：在自定义覆盖物上实现clearOverlays()不清除
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。百度地图覆盖物问题 - ITeye问答
&&& 您好，我现在用百度地图做web应用，地理位置信息均存放在数据库中，存放的数据有点和面两种类型的坐标。因为考虑到以后数据库量大，不能一次全部加载到地图上，所以想采用在可视范围内显示的方式来实现，现在的问题是数据库中存放的点和面的地理位置信息，怎么才能确认是在地图的可视范围之内？特别是面的地理位置信息，包含有多个点。
&&& 期待您的指导！谢谢。
采纳的答案
可以使用mapview.getMapCenter()获取当前可视范围中心点的坐标，然后计算出数据库中的点与中心点的距离值，如果该距离在触发显示的范围内（比如100米），就显示该点到地图上。百度地图的SDK中有计算点与点距离的函数，可以自己查阅一下官方文档
已解决问题
未解决问题百度地图API-给自定义覆盖物添加事件方法
本文章简单的介绍了一下关于百度地图的应用，这里我介绍一个功能就是在自己定的层上给加个事件方法，有需要的参考一下。
给marker、lable、circle等Overlay添加事件很简单，直接addEventListener即可。那么，自定义覆盖物的事件应该如何添加呢？我们一起来看一看~-----------------------------------------------------------------------------------------一、定义构造函数并继承Overlay
// 定义自定义覆盖物的构造函数 function SquareOverlay(center, length, color){ this._center = this._length = this._color = } // 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();二、初始化自定义覆盖物
// 实现初始化方法
SquareOverlay.prototype.initialize = function(map){
// 保存map对象实例
this._map =
// 创建div元素，作为自定义覆盖物的容器
var div = document.createElement(&div&);
div.style.position = &absolute&;
// 可以根据参数设置元素外观
div.style.width = this._length + &px&;
div.style.height = this._length + &px&;
div.style.background = this._
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(div);
// 保存div实例
this._div =
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
三、绘制覆盖物
// 实现绘制方法
SquareOverlay.prototype.draw = function(){
// 根据地理坐标转换为像素坐标，并设置给容器
var position = this._map.pointToOverlayPixel(this._center); this._div.style.left = position.x - this._length / 2 + &px&;
this._div.style.top = position.y - this._length / 2 + &px&;
四、添加覆盖物
//添加自定义覆盖物
var mySquare = new SquareOverlay(map.getCenter(), 100, &red&);
map.addOverlay(mySquare);
五、给自定义覆盖物添加事件1、显示事件
SquareOverlay.prototype.show = function(){
if (this._div){
this._div.style.display = &&;
添加完以上显示覆盖物事件后，只需要下面这句话，就可以显示覆盖物了。
mySquare.show();
2、隐藏覆盖物// 实现隐藏方法
SquareOverlay.prototype.hide = function(){ if (this._div){ this._div.style.display = &none&; } }
添加完以上code，只需使用这句话，即可隐藏覆盖物。mySquare.hide();3、改变覆盖物颜色
SquareOverlay.prototype.yellow = function(){
if (this._div){
this._div.style.background = &yellow&;
上面这句话，是把覆盖物的背景颜色改成黄色，使用以下语句即可生效：mySquare.yellow();&第五部分、给覆盖物添加事件&小结：我们在地图上添加了一个红色覆盖物，然后分别添加&显示、隐藏、改变颜色&的事件。示意图如下：那么，我们需要在html里，先写出map的容器，和3个按钮。
&div style=&width:520height:340border:1px solid gray& id=&container&&&/div&&p&
&input type=&button& value=/html/php/lei//"移除覆盖物" onclick="mySquare.hide();" />
&input type=&button& value=/html/php/lei//"显示覆盖物" onclick="mySquare.show();" />
&input type=&button& value=/html/php/lei//"变成黄色" onclick="mySquare.yellow();" />&/p&
然后，在javascript中，添加这三个函数：
// 实现显示方法
SquareOverlay.prototype.show = function(){
if (this._div){
this._div.style.display = &&;
// 实现隐藏方法
SquareOverlay.prototype.hide = function(){
if (this._div){
this._div.style.display = &none&;
}//改变颜色的方法SquareOverlay.prototype.yellow = function(){
if (this._div){
this._div.style.background = &yellow&;
六、如何给自定义覆盖物添加点击事件（这章重要！很多人问的）比如，我们给自定义覆盖物点击click事件。首先，需要添加一个addEventListener 的事件。如下：
SquareOverlay.prototype.addEventListener = function(event,fun){
this._div['on'+event] =}
再写该函数里面的参数，比如click。这样就跟百度地图API里面的覆盖物事件一样了。

我要回帖

更多关于 百度地图自定义覆盖物 的文章

 

随机推荐