使用百度地图JavaScript API构建离线地图应用(完整教程)

最近由于项目需要,需要在网页上构建地图应用,想到了百度地图API。但由于百度地图官方不支持JS离线地图,只有通过此办法实现,在此记录下来,希望能帮上需要的朋友。

本教程是在一位仁兄的基础之上做的拓展,可以先参看一下——使用百度地图离线JavaScript API加载本地瓦片地图。

此教程完整的Demo,,在这里下载——百度离线地图Demo-v1.3.zip

效果图如下:(由于效果图中的瓦片地图文件过大,因此Demo中是很简陋的瓦片地图,可以根据自己需要下载替换)

具体实现步骤如下:

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="?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>所请求的依赖库参数是?v=1.3&mod=map,oppc,tile,control

为了省去麻烦,Demo中的依赖库命名为modules(可以根据自己需要修改),在Demo文件/js路径下,里面已有map,oppc,tile,control,menu,marker,infowindow这几个模块

可以根据自己的需要从这个地址得到:?v=1.3&mod=模块名,然后将内容添加到modules文件中。

所有依赖模块名称如下:

也可以全部下载下来放入modules文件中。

Demo文件中的modules文件中在map模块部分已经去掉了百度版权信息

好想从现在开始抱着你,紧紧地抱着你,一直走到上帝面前。

使用百度地图JavaScript API构建离线地图应用(完整教程)

相关文章:

你感兴趣的文章:

标签云: