百度地图添加覆盖物层级在点聚合之上
页面的地图中加上了点聚合,后来提出需求要把推送过来的最新点处插上小旗子。普通的Marker会被聚合图片覆盖,自定义的覆盖物也是跟普通Marker在一个容器。又试了富Marker,还是不行。这个问题困扰了我许久。用setTop和setZindex也是只是在同一个容器中区分层级。后来发现信息窗口的容器层级最高。如下图:所以,我就试着把图片放在信息容器的容器中。结果真的可以了。上代码:推...
·
页面的地图中加上了点聚合,后来提出需求要把推送过来的最新点处插上小旗子。普通的Marker会被聚合图片覆盖,自定义的覆盖物也是跟普通Marker在一个容器。又试了富Marker,还是不行。这个问题困扰了我许久。用setTop和setZindex也是只是在同一个容器中区分层级。
后来发现信息窗口的容器层级最高。如下图:
所以,我就试着把图片放在信息容器的容器中。结果真的可以了。上代码:
推送过来调用这个方法就可以了。markerList是地图上所有的点,推送过来的只有一个id,所以我是在数组中先找到这个点,再加到地图上的。
getNewPoint(pid){
for(var i=0;i<this.markerList.length;i++){
if(this.markerList[i].id==pid){
if(this.flagMarker==null){
var htm = "<div>"
+ "<img src='../../../static/map/img/mapFlag.png' border='0' />"
+ "</div>";
this.flagMarker = new BMapLib.RichMarker(htm, this.markerList[i].point);
this.map.addOverlay(this.flagMarker);
}else{
this.flagMarker.setPosition(this.markerList[i].point);
}
}
}
}
这里用的是富标注,所以要修改 RichMarker_min.js
/**
* 初始化,实现自定义覆盖物的initialize方法
* 主要生成Marker的主容器,填充自定义的内容,并附加事件
*
* @private
* @param {BMap} map map实例对象
* @return {Dom} 返回自定义生成的dom节点
*/
RichMarker.prototype.initialize = function (map) {
var me = this,
div = me._container = document.createElement("div");
me._map = map;
baidu.extend(div.style, {
position: "absolute",
zIndex: BMap.Overlay.getZIndex(me._position.lat),
// background: "#FFF",
cursor: "pointer"
});
把标注添加到信息容器的容器中,就是这句起作用---------------------------
map.getPanes().floatPane.appendChild(div);
//map.getPanes().labelPane.appendChild(div);//这里添加到了普通Marker容器中
// 给主容器添加上用户自定义的内容
me._appendContent();
// 给主容器添加事件处理
me._setEventDispath();
// 获取主容器的高宽
me._getContainerSize();
return div;
}
自定义覆盖物也是改这一句就可以了
map.getPanes().labelPane.appendChild(div);
更多推荐
已为社区贡献1条内容
所有评论(0)