Vue實現百度離線地圖(v2.0)

 

本人一名小小Java開發工程師，公司前端程序員不夠，讓我去寫前端代碼，這個項目某個功能需要實現離線地圖，我絞盡腦汁，在網上查閱多篇博客，研究了下百度在線地圖的js源碼，終於搞成了，離線地圖可托拉拽、放大縮小。所以我來寫一篇關於Vue項目使用BMap v2.0。

第一步:打開百度地圖在線示例v2.0版本，打開調試模式(F12)，選擇 Network，打開下圖選中js,另存爲map.js

第二步:修改map.js(參考其他人博客的)

           1.添加調用外部資源直接返回代碼

           2.把js加載修改成本地加載的方式

       3.修改map.js依賴的模塊爲本地模塊

        4.修改瓦片加載路徑(瓦片也就是地圖位置不同、級別不同的圖片(png或jpg)，讓後將所有瓦片拼接的成完整地圖)

第四步:下載map.js依賴js和你相應需要實現的功能模塊依賴的js（需要就下載)，找到map.js的Rb值，選中相應的值填入mod中，(地址:http://api0.map.bdimg.com/getmodules?v=2.0&mod=key_value) ,下載的js命名模式爲爲key_value.js

第四步:下載瓦片資源，因爲之前修改map.js的時候是加載png瓦片，所以我們要下載png格式的瓦片。目前來說，網上下載百度地圖離線瓦片的工具都是收費，不是收費的就是帶有水印的或者下載深度不能很大的，這讓我們有些老鐵很難受，因此我提供一個免費的百度地圖離線瓦片下載工具給大家，鏈接: https://pan.baidu.com/s/1BpK71EulyA8ERiMeNF_O7A 提取碼: fjji，但是呢！這個工具下載瓦片深度不全，你也可以自己寫一個瓦片下載工具，用java實現還是很簡單的。

第五步:創建map_loader.js,demo如下

(function() {
    window.BMap_loadScriptTime = (new Date).getTime();
    window.BMap = window.BMap || {};
    window.BMap.apiLoad = function () {
      delete window.BMap.apiLoad;
    };
    let s = document.createElement('script');
    s.src = '/static/map/map.js';
    document.body.appendChild(s);
})
();

第六步:新建文件map，map.js和map_loader.js放到map目錄下，將下載好的依賴js和業務js放到....../map/modules下，把下載好的瓦片放到....../map/tiles下，然後將map文件夾全部放在vue項目的static目錄下，image是存放百度離線地圖圖片資源的，開發時需要什麼圖片就去百度在線演示代碼找到url下載即可，目錄結構如下圖所示。

第七步:vue模板中使用百度離線地圖，我寫的代碼(業務代碼未上傳)如下

<template>
    <div id="bdMap" style="width: 100%; height: 500px;"></div>
</template>
<script>
    import '../../../../static/map/map_loader.js'
    let map 
    export default {
        data() {
            return{ 
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.drawMap()           
            }) 
        },
        methods: {
            drawMap () {
                map = new window.BMap.Map('bdMap', {})
                map.setCurrentCity('北京市')
                map.centerAndZoom(new window.BMap.Point(經度, 緯度), 深度)
                map.enableScrollWheelZoom()//是否可鼠標輪滑放大縮小
                map.enableContinuousZoom()
                // 如下兩項推薦設置，否則沒有對應級別的瓦片會出現空白
                map.setMinZoom(11)//最小深度
                map.setMaxZoom(19)//最大深度
            }
        }
 }

根據我自身開發情況來說，如果你的併發量很大的話，建議把地圖服務用nginx發佈。老鐵！如果我這篇博客對你有很大的幫助！請給我點個贊。如遇到什麼問題，評論處留言幫你解答，如果我不懂，那我也沒得辦法。

老鐵！幹就完了，奧利給！

                                                                           非學無以廣才，非志無以成學。