百度地圖插件 覆蓋物 之定義 美化

咱們都知道，百度地圖默認的標註點，就是一個紅點點，上面大，下面小，酷似一個紅氣球。寫上文字後，一個紅框，加文字，總體感受特別粗糙；
那麼如何修改這個不完美的現狀呢？

幸虧，百度地圖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>