zoukankan      html  css  js  c++  java
  • 百度地图应用简单例子

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    function loadMap(){
           
        function ComplexCustomOverlay(point, text, mouseoverText){
          this._point = point;
          this._text = text;
          this._overText = mouseoverText;
        }
        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);
          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.onmouseover = function(){
            this.style.backgroundColor = "#6BADCA";
            this.style.borderColor = "#0000ff";
            this.getElementsByTagName("span")[0].innerHTML = that._overText;
            arrow.style.backgroundPosition = "0px -20px";
          }
    
          div.onmouseout = function(){
            this.style.backgroundColor = "#EE5D5B";
            this.style.borderColor = "#BC3B3A";
            this.getElementsByTagName("span")[0].innerHTML = that._text;
            arrow.style.backgroundPosition = "0px 0px";
          }
    
          mp.getPanes().labelPane.appendChild(div);    
          return div;
        }
        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";
        }
        
            var mp = new BMap.Map("map");          
            var mouseoverTxt = "耗热量1233kwh" ;     
            var txt;
            var longitude = 116.35358;
            var latitude = 40.065909;
               
         Ext.Ajax.request({
            url: 'informationSystem/getMapMessage',
            success: function (response) {
         
            mp.centerAndZoom(new BMap.Point(116.35358,40.065909), 13);
            mp.enableScrollWheelZoom(); 
            
            var strs = response.responseText.split(';');
            var values,li;
            var s=document.getElementById('xxli');
            for(i=0;i<strs.length;i++){
                  values = strs[i].split(',');
                   if(values.length > 1){
                          txt = values[0];
                          longitude = parseFloat(values[1]) + parseFloat(0.00628);//转换成百度地图的经度误差
                          latitude = parseFloat(values[2]) + parseFloat(0.006309);//转换成百度地图的纬度误差
                          li= document.createElement("li");
                          li.className = "xxli";
                          li.innerHTML = values[3];
                          s.appendChild(li);
                          mp.addOverlay(new ComplexCustomOverlay(new BMap.Point(longitude,latitude),txt,mouseoverTxt));      
                   }
            }   
               var p= document.createElement("p");
               var a = document.createElement("a");
               a.href="javascript:alert('开发中,敬请期待!');";
               a.innerHTML="查看大图";
               p.appendChild(a);
               s.appendChild(p);                   
            },
            failure: function (response) {}
         })       
    }

     去掉百度地图logo:

      .anchorBL{
           display:none;
        }
  • 相关阅读:
    学习之路
    c
    为什么正确,还是有点bug?
    1212
    学习呀
    记录一下学习c语言的过程3.26日1
    字符串处理
    二维数组的转置
    一维数组转置
    Mybatis读取数据实战
  • 原文地址:https://www.cnblogs.com/smileberry/p/2938989.html
Copyright © 2011-2022 走看看