最近項目使用到百度地圖及相關功能，現在對項目涉及到的地圖創建、設置中心點、地圖事件(dragging)做簡單總結。
一、先給出幾個常用鏈接地址
1.百度api首頁：
http://developer.baidu.com/map/
2.百度地圖城市名稱和經緯度對照表下載：
http://developer.baidu.com/map/devRes.htm
3. javascript類參考庫地址：
http://developer.baidu.com/map/reference/
4.百度地圖api的demo庫
http://developer.baidu.com/map/jsdemo.htm
5.地圖api產品—web服務api
包含（place Api、Geocoding Api 、 Direction Api）
http://developer.baidu.com/map/webservice.htm
------------------------------------------------
博主經營一家發飾淘寶店，都是純手工制作哦，開業沖鑽，只為信譽！需要的親們可以光顧一下！謝謝大家的支持！
店名：
小魚尼莫手工飾品店
經營:
發飾、頭花、發夾、耳環等（手工制作）
網店：
http://shop117066935.taobao.com/
---------------------------------------------------------------------
繼續正題...
二、百度地圖創建
1. 初始化地圖源碼：
引入腳本庫：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
div設置id：
script腳本創建地圖：
<script type="text/javascript">
var map = new BMap.Map("allmap"); // 創建Map實例
var point = new BMap.Point(116.404, 39.915); // 創建點坐標
map.centerAndZoom(point,15); // 初始化地圖,設置中心點坐標和地圖級別。
</script>
2. 分析：
a、使用百度api必須引入百度自己的api類庫文件，如前面提到的“http://api.map.baidu.com/api?v=1.4”版本；
b、地圖創建需要一個container，給div添加id=“allmap”，才能在該div中填充百度地圖；
c、單頁面瀏覽效果時，需要將script腳本實現方式放在<html></html>實現下方，因為dom元素（如div）創建成功后，才能對其<div id="allmap"></div>進行操作；
d、百度地圖初始化需要兩個設置才能完成，一個是地圖container來“盛放”地圖；一個是地圖中心點和縮放級別設置，來正常顯示地圖初始化。
三、百度api事件dragging的使用
1. 查找事件定義：
在http://developer.baidu.com/map/reference/中查找“類參考/核心類/Map”中的事件，也可以使用搜索“dragging”，從事件中找到三個關於dragging的動作
| dragstart | {type, target, pixel, point} | 開始拖拽地圖時觸發。 |
| dragging | {type, target, pixel, point} | 拖拽地圖過程中觸發。 |
| dragend | {type, target, pixel, point} | 停止拖拽地圖時觸發。 |
2. 實現源碼：
在<script></script>中引入相應代碼
a、實現拖拽動作開始時，返回地圖中心點坐標：
map.addEventListener("dragstart", function(evt){
var cp = map.getCenter();
alert(cp.lng + "," + cp.lat);
});
b、實現拖拽過程中獲取當前地圖bounds值：
map.addEventListener("dragging", function(evt){
var offsetPoint = new BMap.Pixel(evt.offsetX, evt.offsetY); //記錄鼠標當前點坐標
alert(offsetPoint.x+","+offsetPointY);
});
ps：關於offsetX/clientX/screenX等的區別，會在其他文章中做介紹。
c、實現拖拽結束時，返回地圖中心點坐標：
map.addEventListener("dragend", function showInfo(){
var cp = map.getCenter();
alert(cp.lng + "," + cp.lat);
});
3.分析：
a、在pc端使用地圖dragging事件，可以實時返回地圖移動過程中的鼠標位置信息；
b、在移動端，dragging事件返回值只包含type、target、currentTarget、方法fa(),可通過遍歷返回值evt讀取包含字段；
c、在移動端，dragging事件相關值offsetX、offsetY可通過函數evt.fa()中讀取；
d、在移動端，dragging過程中，獲取的地圖中心點getCenter、邊界Bounds等都是固定不變的，需要借助fa()中的offsetX、offsetY來輔助實現。
店名：
小魚尼莫手工飾品店
經營:
發飾、頭花、發夾、耳環等（手工制作）
網店：
http://shop117066935.taobao.com/