博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
百度api基本功能与dragging事件的实现
阅读量:5899 次
发布时间:2019-06-19

本文共 1974 字,大约阅读时间需要 6 分钟。

  

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

  <div id="allmap"></div>

  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来辅助实现。  

 店名:

  
经营:
  发饰、头花、发夹、耳环等(手工制作)
网店:
  

转载地址:http://ofhsx.baihongyu.com/

你可能感兴趣的文章
Linux下如何批量修改文件名
查看>>
shell编程
查看>>
Memcached简介
查看>>
top命令批量执行
查看>>
网管的未来出路与学习成长方向选择
查看>>
redis常用语法命令
查看>>
爬取妹子图片
查看>>
IBM Bluemix初识
查看>>
storm 大牛博文
查看>>
数据库技术-为什么在MySQL中只使用InnoDB
查看>>
amazon 汇总
查看>>
cookie 和 session
查看>>
快速知道Windows server2008安装了哪些重要的服务
查看>>
SQL中利用DMV进行数据库性能分析
查看>>
VMware View 5.0从菜鸟到高手系列 5 -配置View Connection Server
查看>>
C# winfrom中创建,读,写、加密ini文件【DES】
查看>>
U盘安装centos7操作系统
查看>>
顺序查找,折半查找,二叉排序树的建立,哈希表的建立
查看>>
UESTC 2014 Summer Training #7 Div.2
查看>>
《气场》读书笔记
查看>>