百度地圖新增覆蓋物層級在點聚合之上
阿新 • • 發佈:2019-01-12
頁面的地圖中加上了點聚合,後來提出需求要把推送過來的最新點處插上小旗子。普通的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);