function ComplexCustomOverlay(point, text){
this._point = point;
this._text = text;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
var div1 = this._div1 = document.createElement("div");
div1.style.position ="relative";
div1.style.display="inline-block";
div1.style.backgroundColor="#01a0e1";
div1.style.border="1px solid #666";
div1.style.fontSize='12px';
div1.style.whiteSpace="nowrap"
div1.style.lineHeight = "1.3em";
div1.style.borderRadius="4px";
div1.style.padding="2px 6px";
div.appendChild(div1);
var a=this._a=document.createElement("a");
a.style.color='#fff';
var div2=this._div2=document.createElement("div");
div2.style.borderColor="#666 transparent transparent transparent";
div2.style.borderStyle="solid";
div2.style.borderWidth="5px";
div2.style.width=0;
div2.style.height=0;
div2.style.position="absolute";
div2.style.bottom="-11px";
div2.style.left="40%"
var div3=this._div3=document.createElement("div");
div3.style.borderColor="#01a0e1 transparent transparent transparent";
div3.style.borderStyle="solid";
div3.style.borderWidth="5px";
div3.style.width=0;
div3.style.height=0;
div3.style.position="absolute";
div3.style.bottom="-10px";
div3.style.left="40%"
div1.appendChild(a);
div1.appendChild(div2);
div1.appendChild(div3);
div.appendChild(div1)
tmpfun = map.onclick;
map.onclick = null;
div.addEventListener("touchstart", function() { //用这种方式绑定点击事件就OK了
map.onclick = tmpfun;
alert("click");
});
map.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._a.innerHTML=this._text;
this._div.style.left = pixel.x - parseInt(this._div.offsetWidth/2) + "px";
this._div.style.top = pixel.y - 30 + "px";
this._div2.style.left=parseInt(this._div.offsetWidth/2)-5+"px";
this._div3.style.left=parseInt(this._div.offsetWidth/2)-5+"px";
}
var myCompOverlay = new ComplexCustomOverlay(e.point, "蜀汉路东(2)位");
map.addOverlay(myCompOverlay);
1,由于项目需要有个模块需要用到地图,所以我选择了百度地图。开始一切都很顺利, 但当我在手机上面调试时,发现我定义的覆盖物点击事件不能触发,瞬间就蒙圈了,在网上找了一段时间终于找到了, 感谢万能的网友。具体方法如下:
// 复杂的自定义覆盖物
绑定事件的时候选择带注释那段就可以了