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中心點）彈出信息窗口
    });
},"北京");

效果：