页面的地图中加上了点聚合,后来提出需求要把推送过来的最新点处插上小旗子。普通的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);

 

 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐