使用百度地图JavaScript API构建离线地图应用(完整教程)
最近由于项目需要,需要在网页上构建地图应用,想到了百度地图API。但由于百度地图官方不支持JS离线地图,只有通过此办法实现,在此记录下来,希望能帮上需要的朋友。
本教程是在一位仁兄的基础之上做的拓展,可以先参看一下——使用百度地图离线JavaScript API加载本地瓦片地图。
此教程完整的Demo,在这里下载——百度离线地图Demo-v1.3.zip
效果图如下:(由于效果图中的瓦片地图文件过大,因此Demo中是很简陋的瓦片地图,可以根据自己需要下载替换)
具体实现步骤如下:
1.构建在线的地图应用。(版本是JavaScript API v1.3,其他版本尚未测试,如有需要可以自行研究)。
基础API下载地址:apiv1.3.min.js
css文件下载地址:bmap.css
API文档下载地址:jsapi1-3.zip
这里先建立一个简单的在线地图应用,页面如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DEMO</title> <script type="text/javascript" src="js/apiv1.3.min.js"></script> <!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script--> <link rel="stylesheet" type="text/css" href="bmap.css"/> </head> <body> <div style="width:520px;height:340px;border:1px solid gray" id="container"></div> </body> </html> <script type="text/javascript"> var map = new BMap.Map("container",{mapType: BMAP_NORMAL_MAP}); var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point,5); // 初始化地图,设置中心点坐标和地图级别。//map.addControl(new BMap.MapTypeControl()); map.addControl(new BMap.NavigationControl()); map.enableScrollWheelZoom(); // 启用滚轮放大缩小。 map.enableKeyboard(); // 启用键盘操作。 </script>
效果图:
观察向网络请求的文件
这些需要离线的资源文件主要有三类:图标素材、依赖模块API文件、瓦片地图文件。下面就从这些下手。
2.下载图标素材
可以通过上图的方式获取素材的下载地址,也可直接从Demo文件/images路径下获取
得到基本的图标素材后,将之前所下载的bmap.css文件里面图片的url修改为本地路径即可。
3.下载依赖模块API文件(非常关键)
此文件必不可少,如果缺少某个依赖模块,则无法使用相应的API。这个请求文件的原理是根据你在自己页面中使用的API来向官网请求相应的依赖模块API,参数的字符串格式是根据所使用依赖模块的顺序生成“模块名”以“,”分隔。
例如:
<script type="text/javascript"> var map = new BMap.Map("container",{mapType: BMAP_NORMAL_MAP}); var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point,5); // 初始化地图,设置中心点坐标和地图级别。//map.addControl(new BMap.MapTypeControl()); map.addControl(new BMap.NavigationControl()); map.enableScrollWheelZoom(); // 启用滚轮放大缩小。 map.enableKeyboard(); // 启用键盘操作。 //map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 </script>
所请求的依赖库参数是 http://api.map.baidu.com/getmodules?v=1.3& mod=map,oppc,tile,control
为了省去麻烦,Demo中的依赖库命名为modules(可以根据自己需要修改),在Demo文件/js路径下,里面已有map,oppc,tile,control,menu,marker,infowindow这几个模块
可以根据自己的需要从这个地址得到:http://api.map.baidu.com/getmodules?v=1.3&mod=模块名,然后将内容添加到modules文件中。
所有依赖模块名称如下:
也可以全部下载下来放入modules文件中。
Demo文件中的modules文件中在map模块部分已经去掉了百度版权信息
如有需要,可以直接使用此文件的map部分去除百度版权。
然后将此资源文件的请求路径改为本地,需要在之前下载的apiv1.3.min.js中修改,由于细节较多这里就不详细描述了,建议直接使用Demo文件中已修改好的apiv1.3.min.js文件。(如有兴趣的话可以通过“代码比较软件”与之前下载apiv1.3.min.js进行比较找到修改之处)
4.下载瓦片地图文件(tile)
这里提供一个下载瓦片地图的软件——全能电子地图下载器1.9.5.zip ,里面包含有注册机,安装过程就不描述了。
这里是使用说明——使用说明(虽然软件声明能下载的地图类型比较多,但好像只有百度地图能正常使用)
根据自己需要下载瓦片地图后直接拷贝到Demo文件/maptile路径下(将原有的文件删除)
在这里教程完毕。
最后:
虽然还有不完善的地方,但完成前面的几步应该就可以根据API文档开发出自己的地图应用了。如果大家还有疑问或者建议,可以留言或者发站内信。
使用百度地图JavaScript API构建离线地图应用(完整教程)相关推荐
- 百度地图JavaScript API GL 实现车辆轨迹功能
百度地图JavaScript API GL是百度地图提供的一种基于WebGL技术的地图展示方式.它可以在现代浏览器中以更高效的方式呈现3D地图场景,同时支持自定义图层和动画效果,可以应用于各种地图应用 ...
- html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版 简介 JavaScript API大众版 JavaScript API功能介绍 百度地图Jav ...
- 百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
- 百度地图 JavaScript API
文章目录 1.账号申请 2.创建应用 3.使用地图 介绍 示例 4.具体使用 控件 个性地图 带高度的点(标记地点.覆盖物) 点击事件 参考资料: 入门百度地图 JavaScript API | 8月 ...
- 百度地图JavaScript API GL—简易行政区划图层
map开发 百度地图JavaScript API GL-简易行政区划图层 administrator 2022年6月6日 简易行政区划图层 更新时间:2022年3月12日 简介 DistrictLay ...
- 百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
- 百度地图JavaScript API GL
介绍 百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口. 下面通过一个简单的示例,来学习一下快速创建一张"我的地图", 百度地 ...
- BIGEMAP(百度、高德、谷歌)离线地图二次开发
(百度.高德.谷歌)离线地图二次开发 发布时间:2019-04-10 版权: 1.如何搭建离线地图开发环境 2.下载离线地图数据(金字塔瓦片数据 ...
- (百度、高德、谷歌)离线地图二次开发
(百度.高德.谷歌)离线地图二次开发 发布时间:2019-04-10 版权: 相关链接:三维(3D)离线地图 二次开发 1.如何搭建离线地图 ...
最新文章
- 场效应晶体管的几点使用知识!
- 修改class文件_VM实战(六) - 通过案例深入学习class文件结构原理
- 掌握好这些不变的底层知识,任他东西南北风!
- abap对采购订单强制置为”交货已完成“状态(BAPI_PO_CHANGE、BAPI_PO_RELEASE、BAPI_PO_RESET_RELEASE)
- 迁移学习简介(tranfer learning)
- QT实现Media Player(媒体播放器)
- mysql数据库sql语句中使用变量_mysql数据库sql语句中使用变量
- 编程学不来就去当产品经理,没那么简单!
- 解决fiddler设置手机代理后无法上网问题
- GBASE 8s UDR内存管理_04_mi_zalloc
- 1004-史丰收速算
- 常见安全漏洞及其解决方案
- VUE中导出Excel功能的实现
- 技术分享 | gh-ost 在线 ddl 变更工具​
- 网页版简单点名系统的实现(HTML5、CSS、JS、jQuery)
- Oracle 11.2.0.3 ORA-12012 ORA-29280 ORA-06512 错误 解决方法
- STM32要按复位键才能下载问题解决
- Eclipse配置tomcat服务器及tomcat简介
- npm install 报错没有匹配版本:No matching version found for
- 我也 30 了,来谈谈程序员的迷茫年龄