HTML5 / JS实现百度地图基本常用功能

很多网站都会使用到地图功能，提供地图接口的第三方也有不少，我这里来聊一下百度地图提供的API及百度地图基本功能的实现：
首先需要在百度地图开放平台申请一个属于自己的密钥，网址：http://lbsyun.baidu.com/apiconsole/key

基本实现

1.引入javascript文件：

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

2.定义一个用于显示地图的容器元素：

<div id="map"></div>

3.样式：

body, html, #map {width: 100%;height: 100%;overflow: hidden;margin:0;}
#map {width: 500px;height: 400px;margin:0 auto;}

4.开始写js脚本，重头戏开始了：

var map=new BMap.Map("map");    //创建百度地图对象
map.centerAndZoom("北京",13); //初始化百度地图

此时最最基本的地图功能就可以实现了，下面说一些类参考和更复杂功能的实现。

核心类 - Map类

构造器：Map(页面容器元素ID)
作用：创建地图实例对象
用法：var map=new BMap.Map("map");

控件类 - ScaleControl类

构造器：ScaleControl({key:value})
作用：创建一个比例尺控件（显示固定距离表示几公里）
用法：var scale = new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT});

控件类 - NavigationControl类

构造器：NavigationControl({key:value})
作用：创建一个地图的平移缩放控件（点击可缩放或平移地图）
用法：var nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT});

控件类 - MapTypeControl类

构造器：MapTypeControl({key:value})
作用：创建一个切换地图类型的控件（切换 卫星/平面/三维 视图）
用法：var type = new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_LEFT});

以上三个控件类的参数相似，都为可选参数，不传参默认在左上角显示
选项：anchor - 设置当前控件显示的位置
值：
BMAP_ANCHOR_TOP_LEFT - 左上角
BMAP_ANCHOR_BOTTOM_LEFT - 左下角
BMAP_ANCHOR_TOP_RIGHT - 右上角
BMAP_ANCHOR_BOTTOM_RIGHT - 右下角

控件类 - OverviewMapControl类

构造器：OverviewMapControl({key:value})
作用：创建一个缩略地图控件（在右下角显示一个小缩略地图）
用法：var overview = new BMap.OverviewMapControl({isOpen:true});（设置为默认显示）

基础类 - Point类

构造器：Point(经度,经度)
作用：以指定的经度和纬度创建一个地理点坐标
用法：var point = new BMap.Point(116.403, 39.915)

服务类 - Geocoder类

构造器：Geocoder()
作用：它的getPoint()方法可以获取用户的地址解析
getPoint()方法：getPoint(‘地址’,function(point){…},’城市’);
如果地址解析成功的话point形参指经纬地理坐标，否则为null
用法：

var geocoder=new BMap.Geocoder();
geocoder.getPoint("地址：北京天安门",function(point){...},"北京")

覆盖物类 - Marker类

构造器：Marker(point)
作用：创建地图上一个图像标注对象（突出显示目的点）
方法：marker.setAnimation(BMAP_ANIMATION_BOUNCE); - 作用：为图像标注添加动画效果
用法：

var marker=new BMap.Marker(point);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);

覆盖物类 - InfoWindow类

构造器：InfoWindow(‘地址信息内容’,’宽高等详细内容’)
作用：设置地图上弹出包含信息的窗口信息（点击目的位置弹出的提示信息窗口）
用法：

var info=new BMap.InfoWindow("地址：北京市西城区西绒线胡同",{
            width:250,
            height:60,
            title:"昌盛大厦"
        });

常用方法：

• centerAndZoom(point,zoom);作用 - 初始化地图中心点和显示级别（参数point为一个基础类Point类的对象或字符串。zoom为显示级别，级别越高显示的距离越短、越清晰。一般情况值范围3-19，高清地图（移动端）值范围3-18。最合适为12/13）
• enableScrollWheelZoom();作用 - 允许鼠标滚轮滚动放大或缩小地图的显示级别
• setCurrentCity(city); 作用 - 设置地图城市（字符串形式）

示例：

var map=new BMap.Map("map");
map.centerAndZoom("北京",13);
map.enableScrollWheelZoom();
map.setCurrentCity("北京");

控件方法：

• addControl(control);作用 - 添加控件实例（参数control为一个控件类对象）
• removeControl(control);作用 - 移除控件实例（参数control为一个控件类对象）

示例：

map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}));
map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT}));
map.addControl(new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_RIGHT}));
map.addControl(new BMap.OverviewMapControl({isOpen:true}));

var overview = new BMap.OverviewMapControl({isOpen:true});
map.addControl(control);
map.removeControl(control);

效果：

覆盖物方法：

• addOverlay(overlay)作用 - 将覆盖物添加到地图中（参数为覆盖物类对象）
• removeOverlay(overlay)作用 - 从地图中移除覆盖物（参数为覆盖物类对象）
• openInfoWindow(InfoWindow,Point)作用 - 在地图上打开信息窗口（InfoWindow设置信息窗口（覆盖物类对象），在Point位置弹出窗口。）

示例：

var geocoder=new BMap.Geocoder();
geocoder.getPoint("北京市西城区西绒线胡同北京昌盛大厦",function(point){
    map.centerAndZoom(point,16);
    var marker=new BMap.Marker(point);
    map.addOverlay(marker);
    var info=new BMap.InfoWindow("地址：北京市西城区西绒线胡同",{width:250,height:60,title:"昌盛大厦"});
    marker.addEventListener("click",function(){
        map.openInfoWindow(info,point);
    });
},"北京");

效果：

综合上述完整代码：

var map=new BMap.Map("map");    //创建百度地图对象
map.setCurrentCity("北京")        //设置地图城市
map.enableScrollWheelZoom();    //开启 鼠标滚轮改变地图显示级别 功能
map.enableDragging();       //开启鼠标拖拽功能
    //以下四句是地图的添加控件方法 和 控件实例
map.addControl(new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}));   //添加一个比例尺控件
map.addControl(new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT}));  //添加一个平移缩放控件
map.addControl(new BMap.MapTypeControl({anchor:BMAP_ANCHOR_TOP_RIGHT}));    //添加一个切换地图类型的控件
map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加一个地图缩略图控件
//移除控件的方法是：removeControl(control)

var geocoder=new BMap.Geocoder();   //Geocoder服务类，它的getPoint()方法可获取指定地理位置的经纬度坐标
geocoder.getPoint("北京市西城区西绒线胡同北京昌盛大厦",function(point){
    //point是一个基础类Point(lng,lat)，以经、纬度来表示一个地理点坐标。
    //这里地址解析成功的话point形参指经纬地理坐标，否则为Null
    map.centerAndZoom(point,16);    //设置百度地图的中心点坐标 和 显示级别
    var marker=new BMap.Marker(point);  //创建地图上一个图像标注（覆盖物、在中心点point位置）
    map.addOverlay(marker);     //覆盖物方法，将覆盖物添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //为图像标注添加动画效果
    var info=new BMap.InfoWindow("地址：北京市西城区西绒线胡同",{
        width:250,
        height:60,
        title:"昌盛大厦"
    }); //创建弹出信息的窗口（覆盖物类）
    marker.addEventListener("click",function(){ //点击图像标注时弹出信息窗口
        map.openInfoWindow(info,point); //在指定点（此处为point中心点）弹出信息窗口
    });
},"北京");

效果：