1. 程式人生 > >百度地圖新增覆蓋物層級在點聚合之上

百度地圖新增覆蓋物層級在點聚合之上

頁面的地圖中加上了點聚合,後來提出需求要把推送過來的最新點處插上小旗子。普通的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);