百度地图 JavaScript API极速版 开发体会

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

    本套百度地图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做客户端开发。
  2. 解决信息窗口弹出错误问题:在循环添加infowindows的过程中出现只有最后一个弹出窗口能够显示。
  3. 优化窗口标注加载刷屏问题:地图平移过程中,通过新请求数据和地图上已有的坐标点数据进行比对,判断是否绘制或者删除。在地图放大或者缩小过程中随地图一起清空重绘。
  4. 控制窗口内绘制标注的数量:绘制过程中通过堆栈的机制,控制标注的绘制顺序过程。可自定义堆栈大小。
  5. 解决窗口zoomend事件被二次触发问题。
  6. 通过自建对象存储需要弹出的info窗口信息,使用坐标比对方式查找对应信息。
  7. 重新定义bounds请求范围,解决标注和边框重合。
  8. 通过百度提供的IP定位接口来进行定位。(非常不准)

   想要代码的同学请自己通过调试窗口拷贝 topspeedmap.js文件。全在里面没有加密,请保留作者信息。如果找不到脚本文件就留个邮箱吧,我会在我想起来的时候发你一份最新更新版本

扫描手机码访问测试

在线访问地址:http://rivers.duapp.com/

注意:百度地图文档中提供的方法已经过时了。想预览请参考我下面的步骤。

百度地图 JavaScript API极速版 开发体会,布布扣,bubuko.com

时间: 06-09

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

百度地图JavaScript API使用

最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以想着地图应该是相似的,百度地图可能也能实现这样的功能,于是就开始了百度地图JavaScript API使用的学习探究了. 简单介绍:百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用,包含了构建地图基本功能的各

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

在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节的错: <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(121.38750613, 31.17

wex5 实战 百度地图JavaScript API 集成

wex5里提供了一个bMap组件来调用百度地图,在百度地图api里,有许多版本的api供开发者调用.在wex5开发里,JavaScript API 集成,经过测试,成功.今天从0开始一步一步操作,将来会制作更复杂的地图与定位效果,大家共同学习,共同进步. 一 演示效果: 二 设计思路: 用html页面,装入百度地图,再将html页面放入iframe页中. 三 代码实现: 1  申请百度会员,并申请百度api ak(开发者密钥) 所有的第三方集成都需要密钥,相当于为当前的用户请求分配的一个id,服

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

最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题! 在网上查询了下,有网友回答说不要频繁的去new marker,而是初始化话一定量的marker,然后setPosition.但是我的页面中匹配当前城市 注入marker也没有几个,所以排除这答案. 最后发现有网友说版本不稳定引起的,于是把百度地图API回退到了1.5,结果还真是可以了.

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

项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖物的基础上的. 如何做到,我点击覆盖物弹出信息框,信息框能够持续显示实时信息,直到点击关闭? 做下笔记,包括了自定义覆盖物标识.自定义信息窗口.信息窗口显示实时信息.清除覆盖物时信息窗口的显示问题等等. 贴张效果图:     代码: <script type="text/javascript&

百度地图javascript API的使用

最近做自己的网站,调用百度地图的js API,在页面上显示一些坐标点.遇到一个问题,就是当坐标点超过10个时,convertor.translate(tempPointArr, 1, 5, translateCallback)执行完后,在translateCallback中数据的状态不是0,应该就是GPS经纬度转换没有完成,导致坐标点不会被添加到地图上显示.不知道原因所在,看API文档应该能找到答案,无奈装的艾普宽带,现在百度地图的js API网页打不开.把坐标转换分成10个一组来做,可以解决这

百度地图的API接口----多地址查询和经纬度

最近看了百度地图的API的接口,正想自己做点小东西,主要是多地址查询和经纬度坐标跟踪, 下面的代码直接另存为html就可以了. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" c

你永远学不会的设计--&gt;百度地图map api key 的设置

哈哈 说到咱的互联网大佬 baidu, 真是无人不知,无人不晓,可是多少人能领会他的设计哲学呢? 来看看吧.... 事情要从上周的一个小实验说起,目标是调用baidu map api 做个产品原型. 通常呢,调用API 都是需要申请key的,方便有针对性地统计调用请求的情况,这个是行业的通用做法,然后小弟就去官网乖乖申请了个key, 然后呢,有一大堆的api 分类,啥 place API, route API , static map API 不管统统给我选上, 接下来就是查看api 开发文档示

关于百度地图js api的getCurrentPosition定位不准确的解决方法

很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. 1 //创建查询对象 2 var geolocation = new BMap.Geolocation(); 3 4 //调用getCurrentPosition函数 5 geolocation.getCurrentPosition(function (position) { 6 7 //如果查询成功 8 if (this.getStatu() == 'B