百度地图的使用

1注册百度账号，在页面申请密钥(AK)

申请百度账号和ak。应用名称可以自己随便取一个名字，只要符合其命名规范即可。应用类型需要选择浏览器端。由于是本地自己使用，我就将白名单设为*。点击提交去激活。激活成功后就会获得相关的ak。

image.png

http://lbsyun.baidu.com/apiconsole/key?application=key 

2页面引入

3地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

4设置地图中心点

这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）

var point = new BMap.Point(116.404, 39.915);

5地图初始化，同时设置地图展示级别

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。

map.centerAndZoom(point, 15);

//百度地图API功能

 var map = new BMap.Map("container");
 map.centerAndZoom(new BMap.Point(120.378386,30.309756),15);//根据坐标初始化地图
  map.enableScrollWheelZoom(true);
 map.addControl(new BMap.NavigationControl());   //平移缩放控件
 map.addControl(new BMap.ScaleControl());        //比例尺
 map.addControl(new BMap.OverviewMapControl());  //缩略地图 map.addControl(new BMap.MapTypeControl());      //地图类型
map.setCurrentCity("杭州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
 
    //添加标注
    var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756));        // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中

至此，地图已经可以显示了。

image.png

完整代码如下：