最近项目使用到百度地图及相关功能，现在对项目涉及到的地图创建、设置中心点、地图事件(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/