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发布。老铁！如果我这篇博客对你有很大的帮助！请给我点个赞。如遇到什么问题，评论处留言帮你解答，如果我不懂，那我也没得办法。

老铁！干就完了，奥利给！

                                                                           非学无以广才，非志无以成学。