在前面两张简单介绍了百度地图API的基础知识和使用之后,我们来分析一下百度地图API的基本架构,了解一下基本架构可以帮助我们更清晰的了解API的功能和调用过程,也就可以帮助我们在实际开发中可以更方便的组织自己的代码。因为百度地图API内部有很多函数都是异步执行的,我们大家都知道js是单线程程序,所有异步代码的执行都必须在同步代码执行之后的。所以如果我们自己写代码进行API开发的时候,如果在同步代码中使用一些函数报错 undefined的话,很有可能就是API内部的异步代码未执行完造成的。这样的情况,我们也就只需要将自己的同步代码转为异步执行就可以了。

  好的,废话不多说了,先来张图说明一下百度地图API的功能。

地图展示所包含的功能就是百度地图API的一些基础功能,包括地图显示,控件,覆盖物,地图工具等这些都是靠js和html就可以实现的。比如覆盖物就是通过js生成dom元素在地图上显示的,而检索功能就必须得依赖后端的服务了,百度地图API的前端与检索功能的底层服务中间有一层phpui代理,phpui的主要作用就是接受api前端的检索请求,然后转发给底层服务返回数据,百度地图API的前端跨域请求并不是以ajax的方式去请求的,而是动态生成script标签去加载的。内部会生成一个随机的回调函数传给后端,回调函数用来处理返回数据的。

  或许这样的脑图功能点更清楚些。各位也先不要晕。这些功能后续慢慢来消化。

  百度地图API作为一个使用量很大的前端框架,如果这些所有的代码都放在一个文件里面,呵呵,可以想象文件肯定非常大,这对于前端的性能来说简直是噩梦,所以百度地图API的设计也是模块化的,但是这种模块化和现在主流的AMD、CMD思想不一样的,当然最终加载实现的原理是一样的,也是通过动态script标签去获取异步模块文件,但是百度地图API的模块化设计是09年就已经行成,而那时候AMD还不知道是什么东西,所以地图API的模块化设计没有id的概念,只有文件的概念,以文件名+MD5标识模块文件名,模块之间的依赖关系也是在编码设计的时候就已经预先定义好的,内部代码中保存有模块之间的依赖数组,加载某一模块的时候,先通过模块依赖数组获得相关的依赖模块文件,最后统一将模块名合成字符串打包加载模块文件。加载完之后进行本地localStorage存储,这样在下次获取模块文件的时候首先检查本地存储,如果有的话直接获取本地文件。这样也是减少了网络请求。

  百度地图API的模块化是按照接口与实现分离的思想设计的,首先有一个类声明文件,类声明中预先定义了需要对外暴露的接口,但是接口的真正实现是放在异步文件中的。比如现在有一个map.js 表示map这个模块,map.js中先声明很多接口函数,但是函数体并不是真正的执行代码,或只是含有一些必要的代码,保证在类实现文件未加载的时候调用接口不报错,而真正的实现文件map_Impl.js对map.js中的声明接口都进行了覆盖,所以当加载完map_Impl.js之后真正的接口实现也就覆盖了预先声明的接口。

  之所以这样设计,也是考虑到前端的性能,因为在保证首图加载的情况下,一些不是立即需要的模块和接口是不需要首图加载的时候去执行的,这样将功能模块化。模块设计也按照接口与实现分离的方式,尽可能的减少同步文件的大小。保证地图首图的加载速度。也就是所说的按需加载。

  这样的设计其实和Google Map是一致的。当然Google一直是互联网的老大哥,好的东西当然需要借鉴了。

  我们来根据示例分析一下地图API的地图加载过程。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=*****"></script>
<script type="text/javascript">
var mp = new BMap.Map('map_container', {
enableHighResolution: true
});
mp.centerAndZoom('北京', 15);
mp.enableScrollWheelZoom(); </script>

  首先加载http://api.map.baidu.com/api?v=2.0&ak=***** 获取地图引导文件。获取文件如下图:

  通过document.write的方式加载真正的地图主文件,getscript就可以获取地图api的压缩过后的主脚本文件了。获取主文件之后,就可以调用BMap对象了,可以生成Map实例去load地图了。

  在Map加载地图的时候实际有一些模块还是异步获取的,利用Chrome的开发者工具抓取一下网络请求如下:

  如上图所示,getmodules就是获取异步模块的请求,异步文件会覆盖一些主文件中类的接口方法。模块名是按照脚本文件名++文件md5加密组成,这样加md5的方式可以保证模块更新的时候加载最新的模块文件。

  所以,综上所述,百度地图API在加载地图的过程中,首先是api请求获取地图引导文件,然后引导文件去加载地图主文件,地图主文件有一些同步代码文件合并压缩而成,在同步文件代码执行的过程,在按需去加载异步文件。异步文件会相应覆盖一些同步文件的接口。最后获取地图瓦片图的时候也是相应的瓦片管理模块去实现最终的图片加载过程。加载过程中还包含计算中心点,根据第一章介绍的坐标系概念计算所需的图块信息,计算过程相对比较复杂,暂不累赘。各位也只需了解地图API的加载过程即可。

深入浅出百度地图API开发系列(3):模块化设计的更多相关文章

  1. 深入浅出百度地图API开发系列(1):前言

    百度地图API目前在地图API领域越来越受到众多开发者的关注,许多应用都使用到了百度地图API服务,包括博主me,我自己使用做的是Javascript API,根据经验,我想整理出一份系列教程,如果能 ...

  2. 深入浅出百度地图API开发系列(2):创建地图

    上一篇文章里,先介绍了一下百度地图API开发所涉及到的一些基础概念,包括投影,坐标系等基础概念,再有了这些基础后,我们可以开始开发自己的web地图了.先来个代码示例(建议大家都是用百度地图API大众版 ...

  3. 基于MFC与第三方类CWebPage的百度地图API开发范例

    在进行百度地图API开发之前你需要到http://developer.baidu.com/map申请密匙 密匙申请之后就可以进行百度地图API的开发了. 下面我们以在visual c++6.0里进行地 ...

  4. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  5. 百度地图API开发一——仿照现有测距效果实现测面功能

      最近做了一个百度地图API的开发项目,里面有测量距离和测量面积的功能需求.测量距离百度给出了封装好的javascript包——BMapLib.DistanceTool,效果如下: 这个效果体验很好 ...

  6. android 基于百度地图api开发定位以及获取详细地址

    一:百度地图开发必须要到百度开发平台android开发api下载相应的库,已经申请百度地图开发key. 二:新建项目baidumaplocation.设计main.xml文件这里注意的是MapView ...

  7. 百度地图API开发----手机地图做导航功能

    第一种方式:手机网页点击打开直接进百度地图APP <a href="baidumap://map/direction?mode=[transit:公交,driving:驾车]& ...

  8. 百度地图API开发的快速使用和大量坐标点操作【点聚合,海量点,mapv】

    快速上手 注意:本篇文章代码是基于 百度地图 JavaScript API v3.0 的条件下编写,GL版本可能稍有变化. 地图嘛,很重要的一部分就是坐标经纬度了: 经度: 英文 longitude ...

  9. 百度地图API开发

    1.首先申请百度地图秘钥 http://lbsyun.baidu.com/ 2.需要填一个申请的界面 3.申请后会有类似的东西 4.之后参照以下网址进行MFC编译 mfc webbrowser控件使用 ...

随机推荐

  1. Sherlock and The Beast

    Sherlock Holmes suspects his archenemy, Professor Moriarty, is once again plotting something diaboli ...

  2. Acrobat 2015 win32破解版

    Acrobat 2015 win32破解版,带破解补丁dll覆盖即可 百度云盘:http://pan.baidu.com/s/1i4tFnNJ

  3. MVC中使用AuthorizeAttribute注意事项

    代码调用顺序为:OnAuthorization-->AuthorizeCore-->HandleUnauthorizedRequest 如果AuthorizeCore返回false时,才会 ...

  4. HDOJ2012素数判定

    素数判定 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  5. Ubuntu系统应用程序创建快捷方式的方法

    大家安装了最新版的Ubuntu 14.0系统之后可能觉得很不习惯,因为Ubuntu的桌面干干净净没有任何快捷方式,任务栏的图标拖不下来,右键点击程序图标也没有创建快捷方式的菜单选项: 那如何把自己经常 ...

  6. Java中几种常见排序算法

    日常操作中常见的排序方法有:冒泡排序.快速排序.选择排序.插入排序.希尔排序等. 冒泡排序是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数 ...

  7. (干货)Linux学习资源推荐

    源地址 国内的专业Linux网站(GB) ChinaUnix Linux中国 实验楼: 免费提供了Linux在线实验环境,不用在自己机子上装系统也可以学习Linux,超方便实用!. 国内的专业Linu ...

  8. VScript 函数调用的两种分类:Sub过程和Function过程

    来源:http://soft.zdnet.com.cn/software_zone/2007/0925/523318.shtml 在 VBScript 中,过程被分为两类:Sub 过程和 Functi ...

  9. 【转】Android属性之build.prop,及property_get/property_set

    简要分析一下build.prop是如何生成的.Android的build.prop文件是在Android编译时收集的各种property(LCD density/语言/编译时间, etc.),编译完成 ...

  10. Oracle中存储过程传入表名学习

    Oracle中存储过程传入表名: 一.动态清除该表的数据 create or replace procedure p_deletetable(i_tableName in varchar2)  as  ...