百度離線地圖使用

因為項目要求可能在內網訪問，就不能使用在線地圖，需要使用離線地圖。

但是離線地圖沒接觸過，不知道該怎么辦，一點頭緒都沒有。

整了好久出現了效果，下載就記錄一下，作為自己學習和對別人分享的經驗。

整體流程分析

這里只說百度地圖的，因為我只做出來了百度地圖的，高德、谷歌、天地圖我都不會！

百度地圖官網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>

就是這么簡單。