百度地图Api进阶教程-创建标注和自定义标注3.html

来源：互联网发布：淘宝买家退款率怎么查编辑：程序博客网时间：2024/05/29 09:13
转载：http://blog.csdn.net/sd0902/article/details/8471322
[html] view plaincopy
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>百度地图</title>  
  
  
<script type="text/javascript">  
  
    function initialize() {  
        //---------------------------------------------基础示例---------------------------------------------  
        var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例  
        //map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时，即可设置中心点和地图缩放级别。  
        map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。  
        map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动  
          
        map.addEventListener("click", function(e){  
            document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat;  
        });  
        //---------------------------------------------遮盖物---------------------------------------------  
         var point = new BMap.Point(104.117287, 30.685906);//默认  
         // 创建标注对象并添加到地图    
         var marker = new BMap.Marker(point);    
         map.addOverlay(marker);    
  
           
        var point = new BMap.Point(104.057287, 30.685906);//图片  
        var myIcon = new BMap.Icon("http://t3.baidu.com/it/u=1119318591,884730191&fm=0&gp=0.jpg", new BMap.Size(55, 55));      
         // 创建标注对象并添加到地图    
         var marker = new BMap.Marker(point, {icon: myIcon});    
         map.addOverlay(marker);    
  
         //自定义遮盖物  
        // 定义自定义覆盖物的构造函数    
         var point = new BMap.Point(104.117287, 30.695906);//自定义遮盖物  
        function SquareOverlay(point, length, color){    
            this._point = point;    
            this._length = length;    
            this._color = color;    
        }    
        // 继承API的BMap.Overlay    
        SquareOverlay.prototype = new BMap.Overlay();    
  
        // 实现初始化方法    
        SquareOverlay.prototype.initialize = function(map){    
            // 保存map对象实例    
             this._map = map;        
             // 创建div元素，作为自定义覆盖物的容器    
             var div = document.createElement("div");    
             div.style.position = "absolute";        
             // 可以根据参数设置元素外观    
             div.style.width = this._length + "px";    
             div.style.height = this._length + "px";    
             div.style.background = this._color;      
             // 将div添加到覆盖物容器中    
             map.getPanes().markerPane.appendChild(div);      
             // 保存div实例   
             this._div = div;      
             // 需要将div元素作为方法的返回值，当调用该覆盖物的show、    
             // hide方法，或者对覆盖物进行移除时，API都将操作此元素。    
             return div;    
        }  
        // 实现绘制方法  （您需要在draw方法中设置覆盖物的位置，每当地图状态发生变化（比如：位置移动、级别变化）时，API都会调用覆盖物的draw方法，用于重新计算覆盖物的位置）  
        SquareOverlay.prototype.draw = function(){    
  
              var position = map.pointToOverlayPixel(this._point);  
              this._div.style.left = position.x - this._length / 2 + "px";    
              this._div.style.top = position.y - this._length / 2 + "px";    
        }  
        // 实现显示方法    
        SquareOverlay.prototype.show = function(){    
             if (this._div){    
                this._div.style.display = "";    
             }    
        }      
        // 实现隐藏方法    
        SquareOverlay.prototype.hide = function(){    
             if (this._div){    
                this._div.style.display = "none";    
             }    
        }  
        // 添加自定义覆盖物    
        var mySquare = new SquareOverlay(point, 22, "red");    
        map.addOverlay(mySquare);  
    }  
   
    function loadScript() {  
       var script = document.createElement("script");  
       script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";  
       document.body.appendChild(script);  
    }  
   
    window.onload = loadScript;  
</script>  
  
  
</head>  
 <body>  
    <div id="r-result" style="float:left;width:100px;">打印坐标</div>  
    <div id="allmap" style="width: 800px; height: 500px"></div>  
</body>  
</html>  
  
<script type="text/javascript">  
    // 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));    
     // map.setZoom(14);   //放到到14级  
</script>  