百度地图控件

最新推荐文章于 2024-11-10 15:10:09 发布

ajmwlc0738

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量135

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangmingxia/p/5682956.html

版权

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>百度地图添加控件</title>  
  <style type="text/css">  
  html{height:100%}  
  body{height:100%;margin:0px;padding:0px}  
  #container{height:100%}  
  </style>  
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lcPR2Gl8P174410S4c0KZ9mFi2RK1QLx">
  //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
  //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
  </script>
</head>  
 
<body>  
<div id="container"></div> 
 <!--定义一个自定义控件-->
  <script> 
    function ZoomControl(){    
    // 设置默认停靠位置和偏移量  
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
    this.defaultOffset = new BMap.Size(10, 10);  
    // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
   // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
    }
    // 通过JavaScript的prototype属性继承于BMap.Control   
     ZoomControl.prototype = new BMap.Control();
     // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
    // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
    ZoomControl.prototype.initialize = function(map){    
    // 创建一个DOM元素   
     var div = document.createElement("div");    
    // 添加文字说明    
     div.appendChild(document.createTextNode("放大2级"));    
     // 设置样式    
     div.style.cursor = "pointer";    
     div.style.border = "1px solid gray";    
     div.style.backgroundColor = "white";    
     // 绑定事件，点击一次放大两级    
     div.onclick = function(e){  
      map.zoomTo(map.getZoom() + 2);    
     }    
     // 添加DOM元素到地图中   
     map.getContainer().appendChild(div);    
     // 将DOM元素返回  
   return div;    
   }
   
  </script> 
  <script type="text/javascript"> 
  var map = new BMap.Map("container");          // 创建地图实例  
  var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
  map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
  
  var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}    
            map.addControl(new BMap.NavigationControl(opts)); 
    
    
 // map.addControl(new BMap.NavigationControl());  //地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能
  map.addControl(new BMap.ScaleControl());    //比例尺控件，默认位于地图左下方，显示地图的比例关系。
  map.addControl(new BMap.OverviewMapControl());  //缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
  map.addControl(new BMap.MapTypeControl());// 地图类型控件，默认位于地图右上方
  map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
  
  // 创建控件实例    
   var myZoomCtrl = new ZoomControl();
   map.addControl(myZoomCtrl); 
   
  </script> 
  
  
</body>  
</html>