vue-baidu-map做内网离线

最近有个需求 就是做内网使用的百度地图离线功能  需求给到我的时候脑壳都是懵的 抓耳挠腮了两天终于搞定了

这里感谢 博主Zw Min文章的提示vue-baidu-map离线地图配置详解

• 首先我们来安装vue-baidu-map插件 （我的vue版本2.7.8 vue-baidu-map版本0.21.22）
• 下载百度api的js代码

  http://api.map.baidu.com/getscript?v=2.0&ak=你的百度地图ak密钥

 复制之后新增文件baidu-api.js文件将复制的内容丢在文件里面

• 创建并引入baidu-init.js文件

  (function() {
      window.HOST_TYPE = "2";
      window.BMap_loadScriptTime = (new Date).getTime();
      window.BMap = window.BMap || {};
      window.BMap.apiLoad = function() {
          delete window.BMap.apiLoad;
          if (typeof _initBaiduMap == "function") {
              _initBaiduMap()
          }
      }
      ;
      var s = document.createElement('script');
      s.src = '你部署的baidu_api.js文件地址';
      document.body.appendChild(s);
  }
  )();

  比如本地nginx代理的http:127.0.0.1:8080/baidu-api.js

•  在vue依赖包 node_modules文件找到，vue-baidu-map
  

  // 在文件index.js里面搜索https://api.map.baidu.com/api?v 搜索到后替换代理本地文件baidu-init.js的地址
  

  

• 下载瓦片地图地址  可以找我要（我这里只下载了zoom为14的瓦片 瓦片放在nginx，确保一定要访问的到 上面的两个js文件也是）
  
•  修改baidu-api.js文件
  1、用url.domain.main_domain_cdn多找几次，定位到代码：
  

        按照我红框里面的修改 每个人的字母可能会不一样 注意仔细看   B.aO = ''

        

        2、用&callback=BMap.，定位到代码：        

        第一行添加代码：if (/^http/.test(a)) return; 

       3、 用 url.domain.main_domain_cdn，定位到下面代码：

                修改自己代理的瓦片资源路径 我的路径是http://127.0.0.1:8089/  

4、用 ?qt=vtile&x=  ，定位到下面代码注意 我这有两个地方

        修改自己代理的瓦片资源路径

 最后其他就按vue-baidu-map文档来写就ok了 

• 效果 （我这里瓦片只放了一点点 所以其他的显示不出）

• 这里再次感谢 博主Zw Min   博主文章链接vue-baidu-map离线地图配置详解