zoukankan      html  css  js  c++  java
  • 百度api基本功能与dragging事件的实现

      

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

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

      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/

  • 相关阅读:
    浙大数据结构课后习题 练习二 7-2 Reversing Linked List (25 分)
    浙大数据结构课后习题 练习二 7-2 一元多项式的乘法与加法运算 (20 分)
    浙大数据结构课后习题 练习一 7-1 Maximum Subsequence Sum (25 分)
    浙大数据结构课后习题 练习一 7-1 最大子列和问题 (20 分)
    PAT Basic 1019 数字黑洞 (20 分)
    PAT Basic 1017 A除以B (20 分)
    PAT Basic 1013 数素数 (20 分)
    PAT Basic 1007 素数对猜想 (20 分)
    PAT Basic 1003 我要通过! (20 分)
    自动化运维——HelloWorld(一)
  • 原文地址:https://www.cnblogs.com/qiongmiaoer/p/2951154.html
Copyright © 2011-2022 走看看