百度离线地图使用

百度离线地图使用

因为项目要求可能在内网访问，就不能使用在线地图，需要使用离线地图。

但是离线地图没接触过，不知道该怎么办，一点头绪都没有。

整了好久出现了效果，下载就记录一下，作为自己学习和对别人分享的经验。

整体流程分析

这里只说百度地图的，因为我只做出来了百度地图的，高德、谷歌、天地图我都不会！

百度地图官网API： http://lbsyun.baidu.com/jsdemo.htm#webgl0_1

首先百度地图官网是不提供web浏览器离线地图的资料的，都得自己找。

瓦片图

制作百度离线地图，首先得有瓦片图，就是不能通过网络从百度地图服务器拿百度地图的背景图片你就得自己准备了，瓦片图就是一块一块的png或者是jpg的图片，在线的都是从百度服务器实时获取的，但是离线上不了网，访问不了百度服务器，就只能我们自己提前把需要的区域瓦片图片下载下来了。具体的下载步骤，看我这篇博文：https://blog.csdn.net/weixin_42776111/article/details/107864040 （点个赞哈~！）

瓦片地图一共分21级，级数越大道路越清晰，范围越小越细致，也就越多越大，一般14~16级就可以了，下载的时候考虑清楚，越大越好，但是图片也多，可能几十万张，按自己的需求下载吧。，不多说了。

离线API

在线的地图都是注册一个key值，然后按照官方提供的教程，引入 script 加上自己的 key 值，就可以访问百度服务器获取在线的API，完成自己需要的功能，还是那个问题，离线，你访问不了百度的API，所以，卒！

哈哈哈，百度不提供离线API文件，我们得自己封装离线的API，但是我是个小菜鸡，封装臣妾真的是做不到啊~~

但是没关系，有大佬做的到！

上链接！ http://www.xiaoguo123.com/p/baidumap_offline_v2/

这个大佬很牛逼！

里面已经说得相当清楚了，不多说，你看的懂！

基本的使用方法如下：

1）加载离线地图必须的文件：

<script type=”text/javascript” src=”offlinemap/map_load.js”></script>
<link rel=”stylesheet” type=”text/css” href=”offlinemap/css/map.css”/>

2）增加一个容器用来显示地图

<div id=”map_demo”></div>

3）写JS脚本

<script type=”text/javascript”>
var map = new BMap.Map(“map_demo”); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 7); // 初始化地图,设置中心点坐标和地图级别
map.setCurrentCity(“武汉”); // 设置地图中心显示的城市 new！
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl()); //缩放按钮
map.addControl(new BMap.MapTypeControl( {mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]} )); //添加地图类型控件 离线只支持普通、卫星地图; 三维不支持
</script>

就是这么简单。