前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好。 把开发人员细分成普通web开发人员和移动web开发人员。正好用到了手机地图这块决定尝试一下。先看一下百度地图官方对它的定义。

尊重劳动成功请保留原文地址:http://blog.csdn.net/lbsnews/article/details/29368879

    本套百度地图API是专为手机浏览器提供的API,您可使用该套API,在手机页面中展示地图、标注位置、检索poi、查询线路等。

特点:

  1. 较同一时候兼容PC和手机浏览器的JavaScript API大众版而言,该版更适配移动设备,体积更小,载入地图速度更快,更省流量;
  2. 较移动端常採用的静态图API,该版本号可载入动态地图,进行地图操作,如拖拽、缩放、检索、线路规划等,更好满足用户对地图的丰富需求。
  3. 适用手机浏览器类型:Android自带、UC、百度、QQ等主流浏览器。
    我是先看的Dome和开发文档,总结的时候才看这个描写叙述。真是个非常轻量的SDK。不要用大众版的标准来要求它。百度地图这个做减法的工作还是非常有针对性的。
    假设想先出个Holle World 能够看一下百度地图入门 官方文档。要是做过百度地图大众版本号开发的请继续往下。

一、极速版本号大众版本号创建地图时的差别
  1. HTML5的定义: <!DOCTYPE html>
  2. 响应式设计的定义:<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  3. 极速版本号type定义: http://api.map.baidu.com/api?type=quick&ak...
二、开发过程中的接口差别
  1. 接口方面:少了非常多接口,大众版本号的代码不能直接在极速版上这使用。会提示对象没有定义方法。 最明显的就是没有lable对象。仅仅能加入mark。原来定义的复杂标注在这都是使不了,仅仅能通过加入弹出窗体来丰富标注信息。手机专用的touch事件也仅仅保留了两种情况。
  2. 效率方面:和大众版本号不是一个级别的。考虑到是在手机上执行,绘制标注的数量就须要严格控制。手机窗体中超过50个mark就開始影响正常的放大缩小操作了,还会卡顿。也可能我手机(M2)比較烂。
  3. BUG:我对V1.0版本号的測试表示强烈质疑,我遇到的问题不是什么犄角旮旯里的错误。一个zoomend事件响应两次。还有Infowindows(弹出窗体)仅仅能指定一个mark实例,说简单点多个mark无法和多个Infowindows相应。 尝试了非常多方式没解决,仅仅能自己新建对象存储信息还要比对出相应关系。弹出的Infowindows窗体在手机上也时常关不掉。不多说了就那几个接口谁用谁知道。
三、完毕的内容
做了一个极速版的原型,处理了上面提到到的几个BUG,优化了mark的绘制,对用极速版开发的朋友会有些帮助。
  1. 使用百度提供的LBS云作为POI点的管理工具。使用《JavaScript API 极速版》SDK做client开发。
  2. 解决信息窗体弹出错误问题:在循环加入infowindows的过程中出现仅仅有最后一个弹出窗体可以显示。
  3. 优化窗体标注载入刷屏问题:地图平移过程中,通过新请求数据和地图上已有的坐标点数据进行比对,推断是否绘制或者删除。在地图放大或者缩小过程中随地图一起清空重绘。
  4. 控制窗体内绘制标注的数量:绘制过程中通过堆栈的机制,控制标注的绘制顺序过程。可自己定义堆栈大小。
  5. 解决窗体zoomend事件被二次触发问题。
  6. 通过自建对象存储须要弹出的info窗体信息,使用坐标比对方式查找相应信息。
  7. 又一次定义bounds请求范围,解决标注和边框重合。
  8. 通过百度提供的IP定位接口来进行定位。(很不准)
   想要代码的同学请自己通过调试窗体拷贝 topspeedmap.js文件。全在里面没有加密,请保留作者信息。假设找不到脚本文件就留个邮箱吧,我会在我想起来的时候发你一份最新更新版本号


扫描手机码訪问測试

在线訪问地址:http://rivers.duapp.com/
注意:百度地图文档中提供的方法已经过时了。想预览请參考我以下的步骤。






百度地图 JavaScript API 极速版 开发体会的更多相关文章

  1. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  2. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  3. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  4. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  5. 百度地图JavaScript API V1.5初级开发工具类

    /** * 百度地图使用工具类-v1.5 * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email boo ...

  6. 百度地图JavaScript API [一]

    参考网址: http://developer.baidu.com/map/index.php?title=jspopular/guide/widget 1.申请密钥(ak) http://api.ma ...

  7. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

  8. 苹果手机 微信调用百度地图Javascript API 频繁闪退问题

    最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题! 在网上查询了下,有网友回答说不要频繁的去new marker,而是初始化话一定量的mark ...

  9. 百度地图JavaScript API本地搜索的结果面板

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. Ansible 管理服务和软件

    [root@Ansible ~]# ansible RAC -m yum -a 'name=iscsi-initiator-utils state=installed' RAC_Node1 | suc ...

  2. (转)在server 2008R2组策略设置所有域计算机防火墙都处于更关闭状态

    组策略在域控中相当重要,我们可以下放一个组策略去统一管理下面客户端的配置,具体配置如下: 首先点击开始____管理工具____组策略管理 防火墙关闭完之后我们该如何到客户端验证呢? 首先我们需要现在客 ...

  3. 重写ajax方法实现异步请求session过期时跳转登录页面(转)

    一般我们会在过滤器里判断登录状态,如果没登录就跳转登录页面,过滤器java核心代码如下: UserItem loginUser = (UserItem)request.getSession().get ...

  4. ivotal-tc-Server与Tomcat区别

    Pivotal-tc-Server之前叫做SpringSource tc Server,包含三个版本分别是:Spring版.标准版和开发版,但其中只有开发版是免费的.比如在STS中包含的版本就是开发板 ...

  5. 24、驱动调试之printk

    1.uboot跳转到内核启动的时候通过环境变量 console设置控制台 (console = ttySAC0表示输出到串口,并从串口结束输入,也可以设置console=tty1,表示输出到LCD,从 ...

  6. 使用Array和[]创建数组的区别

    原文 简书原文:https://www.jianshu.com/p/57a337d20aea 大纲 前言 对使用Array和[]创建数组的区别的解释 个人理解 前言 JS定义数组变量时,在不需要给定数 ...

  7. HDU 2852 KiKi's K-Number 树状数组

    先补充从n个数中求第k小数的理论知识........ 睡觉去~ ------------------------------------------又要睡觉的分割线------------------ ...

  8. Xcode5新特性之注释

    Xcode5新特性之注释 Xcode5在注释式文档方面也有进步,越来越象javadoc. Xcode4 参考一下教程 http://blog.chukong-inc.com/index.php/201 ...

  9. android SQLite 使用实例

    Android作为眼下主流的移动操作系统,全然符合SQLite占用资源少的优势,故在Android平台上,集成了一个嵌入式关系型数据库-SQLite.假设想要开发 Android 应用程序,须要在 A ...

  10. jquery-8 jquery如何处理css样式

    jquery-8  jquery如何处理css样式 一.总结 一句话总结: 1.如何获取网页的三个高? 1)可视区域的高$(window).height(); 2)文档总高度$(document).h ...