前段时间百度地图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. Win10系统如何设置所有程序默认以管理员身份运行?

    原文:Win10系统如何设置所有程序默认以管理员身份运行? 在win10系统中有些用户发现一些程序只有使用管理员身份运行能才打开,这样的话就感觉会麻烦很多,那么有没有办法设置所有程序都默认以管理员身份 ...

  2. 【AtCoder ABC 075 A】One out of Three

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用map轻松搞定 [代码] #include <bits/stdc++.h> using namespace std; ...

  3. 【a903】石子归并

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 在一个圆形操场的四周摆放着N堆石子(N<= 100),现要将石子有次序地合并成一堆.规定每次只能选取相 ...

  4. [Javascript] Validate Data with the Every() Method

    The every method returns true or false based on whether or not every item in the array passes the co ...

  5. Size Balanced Tree(SBT树)整理

    不想用treap和Splay,那就用SB树把,哈哈,其实它一点也SB,厉害着呢. 先膜拜一下作者陈启峰.Orz 以下内容由我搜集整理得来. 一.BST及其局限性 二叉查找树(Binary Search ...

  6. Android中常用的优秀开源框架

    Android开源框架库分类,挑选出最常用,最实用的开源项目,本篇主要介绍的是优秀开源框架库和项目,UI个性化控件会独立介绍.UI个性化控件 Index Dependency Injections A ...

  7. 为什么位运算可以实现加法(1、 不考虑进位的情况下位运算符中的异或^可以表示+号)(2、 位运算符中的与运算符&和左移运算符<<可以模拟加法中的进位)(3、位运算不仅可以做加法,还可以做其它的乘法减法等:计算机本质是二进制运算)

    为什么位运算可以实现加法(1. 不考虑进位的情况下位运算符中的异或^可以表示+号)(2. 位运算符中的与运算符&和左移运算符<<可以模拟加法中的进位)(3.位运算不仅可以做加法,还 ...

  8. Java验证是否为纯数字

    package rbq.codedemo; import java.util.regex.Pattern; /** * Created by rbq on 2016/12/13. */ public ...

  9. [TypeScript] Create a fluent API using TypeScript classes

    You can create an easy to chain API using TypeScript classes. Learn about the thisreturn type annota ...

  10. NOIP 模拟 路径求和 - Tarjan+dfs+码

    题目大意: 各一个奇环内向森林,求每两个点对间的距离之和.无法到达则距离为-1. 分析: 首先Tarjan找出size大于1的连通分量(环),环中的边的贡献可以单独计算. 然后从入度为0的点向内dfs ...