百度地图开发自定义覆盖物事件及样式定制

最新推荐文章于 2022-12-12 17:45:29 发布

原创最新推荐文章于 2022-12-12 17:45:29 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

百度地图开发专栏收录该内容

5 篇文章

订阅专栏

在百度地图API中创建了一个名为ComplexCustomOverlay的自定义覆盖物，用div实现标注点。通过设置addEventListener来绑定click、mouseover和mouseout事件。click事件触发时，显示信息窗口；mouseover和mouseout事件改变div内span的文字内容。然而，当点击覆盖物后，span内的文字出现位置错误，移出了div并竖直显示，寻求解决方案。

marker.addEventListener("mouseover",function(){ this.style.backgroundColor = "#6BADCA"; this.style.borderColor = "#6BADCA"; polygon_nc.show(); }); marker.addEventListener("mouseout",function(){ this.style.backgroundColor = "#EE5D5B"; this.style.borderColor = "#BC3B3A"; polygon_nc.hide();

});

---------------------

我在百度地图下自定义了一个覆盖物ComplexCustomOverlay作为标注点，覆盖物是放在div里面的，然后我设置了自定义覆盖物的事件
ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
this._div['on' + event] = fun;
}
然后我写了三个事件click mouseover mouseout，
click事件是点击显示信息窗口
map.openInfoWindow(infoWindow1, new BMap.Point(116.407845, 39.914101));
mouseover事件和mouseout事件都是显示一段文字，这段文字放在div控件的span里面
document.getElementsByTagName("span")[0].innerHTML = mouseoverTxt;
然后当我把鼠标放在上面的时候是正常的，但是点击了这个覆盖物以后，那些文字就不是显示在div里面了，而是到了外面，并且竖着显示，求指导为什么！！！

              
         var map = new BMap.Map("container");            // 创建Map实例
        
         var point = new BMap.Point(116.404, 39.915);    // 创建点坐标
        
         map.centerAndZoom(point, 15);                     // 初始化地图,设置中心点坐标和地图级别。
        
         //1、定义构造函数并继承Overlay
        
         // 定义自定义覆盖物的构造函数  
        
         function ComplexCustomOverlay(point, text, mouseoverText) {
        
         this._point = point;
        
         this._text = text;
        
         this._overText = mouseoverText;
        
         }
        
         // 继承API的BMap.Overlay
        
         ComplexCustomOverlay.prototype = new BMap.Overlay();
        
         //2、初始化自定义覆盖物
        
         // 实现初始化方法  
        
         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);
        
         div.style.backgroundColor = "#EE5D5B";
        
         //div.style.border = "1px solid #BC3B3A";
        
         div.style.color = "white";
        
         div.style.height = "18px";
        
         div.style.padding = "2px";
        
         div.style.lineHeight = "18px";
        
         div.style.whiteSpace = "nowrap";
        
         //div.style.MozUserSelect = "none";
        
         div.style.fontSize = "12px"
        
         var span = this._span = document.createElement("span");
        
         div.appendChild(span);
        
         span.appendChild(document.createTextNode(this._text));
        
         var that = this;
        
         var arrow = this._arrow = document.createElement("div");
        
         arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
        
         arrow.style.position = "absolute";
        
         arrow.style.width = "11px";
        
         arrow.style.height = "10px";
        
         arrow.style.top = "22px";
        
         arrow.style.left = "10px";
        
         arrow.style.overflow = "hidden";
        
         div.appendChild(arrow);
        
         // 将div添加到覆盖物容器中  
        
         map.getPanes().labelPane.appendChild(div);
        
         // 保存div实例 
        
         this._div = div;
        
         // 需要将div元素作为方法的返回值，当调用该覆盖物的show、  
        
         // hide方法，或者对覆盖物进行移除时，API都将操作此元素。  
        
         return div;
        
         }
        
         //3、绘制覆盖物
        
         // 实现绘制方法  
        
         ComplexCustomOverlay.prototype.draw = function () {
        
         var map = this._map;
        
         var pixel = map.pointToOverlayPixel(this._point);
        
         this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
        
         this._div.style.top = pixel.y - 30 + "px";
        
         }
        
         //6、自定义覆盖物添加事件方法
        
         ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
        
         this._div['on' + event] = fun;
        
         }
        
         //7、添加自定义覆盖物  
        
         var txt = "银湖海岸城", mouseoverTxt = txt + "| " + parseInt(Math.random() * 1000, 10) + "套";
        
         var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845, 39.914101), "银湖海岸城", mouseoverTxt);
        
         map.addOverlay(myCompOverlay);
        
         //8、 为自定义覆盖物添加点击事件
        
         var infoWindow1 = new BMap.InfoWindow("普通标注", { offset: new BMap.Size(30, -30) });
        
         myCompOverlay.addEventListener("click", function () {
        
         map.openInfoWindow(infoWindow1, new BMap.Point(116.407845, 39.914101));
        
         //map.setCenter(new BMap.Point(116.407845, 39.914101));
        
         });
        
         myCompOverlay.addEventListener("mouseover", function () {
        
         if (this._div) {
        
         this._div.style.backgroundColor = "#6BADCA";
        
         }
        
         document.getElementsByTagName("span")[0].innerHTML = mouseoverTxt;
        
         });
        
         myCompOverlay.addEventListener("mouseout", function () {
        
         if (this._div) {
        
         this._div.style.backgroundColor = "#EE5D5B";
        
         }
        
         document.getElementsByTagName("span")[0].innerHTML = txt;
        
         });