百度地图 ​

百度地图的使用笔记

快速入门 ​

这里讲解如何在 web 中使用百度地图 API.

1. 进入百度地图网站 申请秘钥

2. 创建应用

3. 在界面中包含 js 脚本，其余加载方式详见 百度 js 说明

   html

   <script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" type="text/javascript"></script>

   1
   

4. 在界面中创造放置地图的元素

   html

      <div id="map" style="width:500px;height:320px"></div>

   1
   

5. 使用百度 js 对象创建地图

   html

      <script>
          /** 不要加 `# 号`，直接填入 id 名即可
           *  1. 创建 地图对象
           */
       
          var map = new BMap.Map("map"); 
         
         // 2. 创建坐标点 地理坐标点，经度:116.404，纬度:39.915
         var point = new BMap.Point(116.404, 39.915);          
         
         // 3. 地图初始化,15 表示地图比例的显示级别
         map.centerAndZoom(point, 15);
      
        // 4. 配置地图参数 过两秒后，将地图中心点移到经度:116.404，纬度:39.918 的地方 
        window.setTimeout(function(){  
            map.panTo(new BMap.Point(116.409, 39.918));    
        }, 2000);
      </script>

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   

基本概念 ​

开发地图应用时相关术语如下。

控件 ​

百度支持的基本控件

控件操作

1. 添加控件

   在实例化地图对象后使用 addControl 方法添加控件

   js

      // 添加平移缩放控件
      map.addControl(new BMap.NavigationControl());

   1
   2
   

2. 配置控件

   1. 更改位置
   2. 修改大小

自定义控件

自定义控件，需要继承控件的基类。 构造器中必须包含如下属性

• defaultAnchor 设置控件位置
• defaultOffset 设置控件偏移

参照百度说明，定义单击放大两个图像级别控件。

1. 设置构造函数

   js

      // 定义一个控件类，即function    
      function ZoomControl(){    
          // 设置默认停靠位置和偏移量  
          this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
          this.defaultOffset = new BMap.Size(10, 10);    
      }    
      // 通过JavaScript的prototype属性继承于BMap.Control   
      ZoomControl.prototype = new BMap.Control();

   1
   2
   3
   4
   5
   6
   7
   8
   

2. 初始化控件

   js

   // 自定义控件必须实现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;    
    }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   

3. 添加自定义控件

   js

       map.addControl( new ZoomControl());

   1
   

覆盖物 ​

覆盖物有如下几类

覆盖物使用

类似空间，使用addOverlay添加覆盖物

   //初始化覆盖物添加坐标
   var point = new BMap.Point(116.404, 39.915);    
   //添加覆盖物
   map.addOverlay(new BMap.Marker(point));

自定义覆盖物

   function addMarker(point, index){  // 创建图标对象   
   var myIcon = new BMap.Icon("ev_charger.png", new BMap.Size(25, 25), {    
   // 指定定位位置。   
   // 当标注显示在地图上时，其所指向的地理位置距离图标左上    
   // 角各偏移10像素和25像素。您可以看到在本例中该位置即是   
      // 图标中央下端的尖角位置。    
      offset: new BMap.Size(10, 25),    
      // 设置图片偏移。   
      // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您   
      // 需要指定大图的偏移位置，此做法与css sprites技术类似。    
      imageOffset: new BMap.Size(0, 0 - index * 25)   // 设置图片偏移    
    });      
   // 创建标注对象并添加到地图   
    var marker = new BMap.Marker(point, {icon: myIcon});    
    map.addOverlay(marker);    
   }    
   // 随机向地图添加10个标注    
   var bounds = map.getBounds();    
   var lngSpan = bounds.maxX - bounds.minX;    
   var latSpan = bounds.maxY - bounds.minY;    
   for (var i = 0; i < 10; i ++) {    
    var point = new BMap.Point(bounds.minX + lngSpan * (Math.random() * 0.7 + 0.15),    
                               bounds.minY + latSpan * (Math.random() * 0.7 + 0.15));    
    addMarker(point, i);    
   }

参考资料 ​

• 百度工具包
• 百度地图示例
• 地图类参考