最近项目使用到百度地图及相关功能,现在对项目涉及到的地图创建、设置中心点、地图事件(dragging)做简单总结。
一、先给出几个常用链接地址
1.百度api首页:
2.百度地图城市名称和经纬度对照表下载:
3. javascript类参考库地址:
4.百度地图api的demo库
5.地图api产品—web服务api
包含(place Api、Geocoding Api 、 Direction Api)
------------------------------------------------
博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!
店名: 经营: 发饰、头花、发夹、耳环等(手工制作)网店:---------------------------------------------------------------------
继续正题...
二、百度地图创建
1. 初始化地图源码:
引入脚本库:
<script type="text/javascript" src=">
div设置id:
script脚本创建地图:
2. 分析:
a、使用百度api必须引入百度自己的api类库文件,如前面提到的“”版本;
b、地图创建需要一个container,给div添加id=“allmap”,才能在该div中填充百度地图;
c、单页面浏览效果时,需要将script脚本实现方式放在<html></html>实现下方,因为dom元素(如div)创建成功后,才能对其<div id="allmap"></div>进行操作;
d、百度地图初始化需要两个设置才能完成,一个是地图container来“盛放”地图;一个是地图中心点和缩放级别设置,来正常显示地图初始化。
三、百度api事件dragging的使用
1. 查找事件定义:
在中查找“类参考/核心类/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来辅助实现。
店名:
经营: 发饰、头花、发夹、耳环等(手工制作)网店: