百度地图插件 覆盖物 之定义 美化

2019独角兽企业重金招聘Python工程师标准>>>

我们都知道，百度地图默认的标注点，就是一个红点点，上面大，下面小，酷似一个红气球。写上文字后，一个红框，加文字，整体感觉特别粗糙；
那么如何修改这个不完美的现状呢？

幸好，百度地图api 提供了一个 覆盖物对象；
，我们采用JavaScript 原型模式，继承一个覆盖物对象；

    // 复杂的自定义覆盖物
        function HouseOverlay(point, type, text, mouseoverText, infoWindow){
          this._point = point;
          this._text = text;
          this._overText = mouseoverText;
          this._infoWindow = infoWindow;
          this._type = type;

        }

        HouseOverlay.prototype = new BMap.Overlay();
        HouseOverlay.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.whiteSpace = "nowrap";
     
          div.innerHTML='<dd class="tagline5 mapdd"><div class="l"><div class="c">'+this._text+'</div></div><div class="r"></div></dd>';

          var that = this;

          var arrow = this._arrow = document.createElement("div");


          arrow.className = 'arr_5';
          arrow.style.position = "absolute";
          arrow.style.top = "20px";
          arrow.style.left = "10px";
          arrow.style.overflow = "hidden";
          div.appendChild(arrow);
         
          div.onmouseover = function(){ 
            
          }

          div.onmouseout = function(){ 
     
          }

          div.onclick = function (){
     
              
          }


          this._map.getPanes().labelPane.appendChild(div);
          
          return div;
        }


        HouseOverlay.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";
        }

    有了这个覆盖物对象， 可以在设定的坐标点上显示出一个覆盖物。

    下面是创建一个百度地图：

    // 百度地图API功能
        var map = new BMap.Map("Baidu_map");
        map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
        map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
        map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
        map.enableScrollWheelZoom();                            //启用滚轮放大缩小
        map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
        var lan = document.getElementById("tempdriver_lng").value;//地图坐标的经纬度
        var lat = document.getElementById("tempdriver_lat").value;
        var point = new BMap.Point(lan,lat);
        map.centerAndZoom(point, 18);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        
        var myCompOverlay = new HouseOverlay(point,1, "[!--title--]","[!--title--]" ,  new BMap.InfoWindow("[!--title--]"));

        map.addOverlay(myCompOverlay);

    这个时候，显示出来的覆盖物没有css 美化；

    加上 下面的样式，就完美了：

    <style>
    .map{}
    .blue{padding:0px 3px;}
    dd.mapdd{ margin:0px; padding:0px; margin-left:0px; float:left; position:absolute; top:-7px;}
    dd.mapdd .l{display:block; margin-left:0px; float:left; }
    dd.mapdd .r{display:block;  }
    dd.mapdd  .c{  padding:6px 4px 8px 8px; color:#fff; margin-right:4px;font-weight:bold; font-size: 12px; line-height: 16px;} 
    .tagline5 .l{ background:url(/skin/mb001/images/button_1.gif) no-repeat left top;  padding-left:3px;} 
    .tagline5 .r{ background:url(/skin/mb001/images/button_1.gif) no-repeat right top;  padding-right:5px;} 
    .arr_5 { background:url(/skin/mb001/images/arr_1.gif); width: 11px; height: 10px; top: 20px; left: 10px; }
    .BMap_bubble_content{line-height:22px;}
    .BMap_bubble_content h4{font-size:14px;color:#c00}
    .BMap_bubble_content span{color:#999;cursor: pointer;}
    </style>

 

转载于:https://my.oschina.net/u/218676/blog/724814