vue整合百度离线地图api3.0

---

前言

这篇文章记录的是我第一次vue整合的百度离线地图,api用的是3.0,之前也用过2.0的方法一致(在下一个java小白)

---

一、场景

vue使用百度离线地图

二、操作步骤

1.引入3.0js文件

访问这个地址http://api.map.baidu.com/api?v=3.0
拷贝src里的内容http://api.map.baidu.com/getscript?v=3.0&ak=&services=&t=20200927172029
再打开这个链接,复制保存到本地js文件,就命名bmap_offline_api_v3.0_min.js吧

2.创建map_load.js

BMap_3.0是我存放这些js的文件夹

(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 = '/BMap_3.0/bmap_offline_api_v3.0_min.js';
  document.body.appendChild(s);
})
();

3.修改bmap_offline_api_v3.0_min.js文件

3.1屏蔽ak验证

function oa(a, b) {
        if (/^http/.test(a))  return;//修改  屏蔽ak验证，若调用外部资源直接返回

        if (b) {
            var c = (1E5 * Math.random()).toFixed(0);
            D._rd["_cbk" + c] = function(a) {
                b && b(a);
                delete D._rd["_cbk" + c]
            }
            ;
            a += "&callback=BMap._rd._cbk" + c
        }
        var e = L("script", {
            type: "text/javascript"
        });
        e.charset = "utf-8";
        e.src = a;
        e.addEventListener ? e.addEventListener("load", function(a) {
            a = a.target;
            a.parentNode.removeChild(a)
        }, t) : e.attachEvent && e.attachEvent("onreadystatechange", function() {
            var a = window.event.srcElement;
            a && ("loaded" == a.readyState || "complete" == a.readyState) && a.parentNode.removeChild(a)
        });
        setTimeout(function() {
            document.getElementsByTagName("head")[0].appendChild(e);
            e = q
        }, 1)
    }

3.2加载modules到本地

我的这段代码就在修改ak验证下面,要细心查找
这里是所有的模块，用到时自动加载（在线），离线的话要先下载下来放到本地，如
http://api0.map.bdimg.com/getmodules?v=3.0&mod=模块1,模块2
模块命名格式是map_01arux，直接拼接起来
保存到自己建的modules文件里

var Bc = {
        map: "01arux",
        common: "g1wth0",
        style: "n4zjcm",
        tile: "4h5riy",
        groundoverlay: "hanqlf",
        pointcollection: "mzctia",
        marker: "qq2pj0",
        symbol: "xnfufp",
        canvablepath: "bi2unv",
        vmlcontext: "3wsb1f",
        markeranimation: "vbzta0",
        poly: "bpulbb",
        draw: "qhsgk3",
        drawbysvg: "jdynmi",
        drawbyvml: "yldn4m",
        drawbycanvas: "ilnwax",
        infowindow: "cu34p0",
        oppc: "nwlvbl",
        opmb: "lix5dg",
        menu: "vhxxn0",
        control: "j15uuh",
        navictrl: "atju25",
        geoctrl: "2j1jki",
        copyrightctrl: "1ezsod",
        citylistcontrol: "fjkpbq",
        scommon: "dnbhjq",
        local: "i0prg0",
        route: "4zemxy",
        othersearch: "3bi0vd",
        mapclick: "di1qem",
        buslinesearch: "g5wey4",
        hotspot: "5ak1wj",
        autocomplete: "hg2dum",
        coordtrans: "su4y5t",
        coordtransutils: "0kslnk",
        convertor: "khwhiz",
        clayer: "w3ptjt",
        pservice: "xzax22",
        pcommon: "wajq4y",
        panorama: "am3won",
        panoramaflash: "amklzb"
    };

方法名可能会有区别,但是大体的方法是一致的,这里要细心找

3.3修改modules加载

此处的’/BMap_3.0/modules/'都是我本地的modules

load: function(a, b, c) {
            var e = this.ob(a);
            if (e.Le == this.Bj.Np)
                c && b();
            else {
                if (e.Le == this.Bj.bG) {
                    this.UJ(a);
                    this.hN(a);
                    var f = this;
                    f.gC == t && (f.gC = p,
                    setTimeout(function() {
                        for (var a = [], b = 0, c = f.Qd.gn.length; b < c; b++) {
                            var e = f.Qd.gn[b]
                              , n = "";
                            ia.py.PJ(e) ? n = ia.py.get(e) : (n = "",
                            a.push(e + "_" + Bc[e]));
                            f.Qd.Dv.push({
                                zM: e,
                                rE: n
                            })
                        }
                        f.gC = t;
                        f.Qd.gn.length = 0;
                        // 0 == a.length ? f.DK() : oa(f.TF.IP + "&mod=" + a.join(","))
                        // 修改 加载本地模块文件，在 modules 目录下
						// console.log(a);   //打印所需模块  
                        if( a.length > 0 ){
                            for (let i = 0; i < a.length; i++) {
                                // console.log(a)
                                mf = '/BMap_3.0/modules/' + a[i] + '.js'
                                oa(mf)
                            }
                          } else {
                            f.DK()
                          } 
                          //就到这
                    }, 1));
                    e.Le = this.Bj.xP
                }
                e.zu.push(b)
            }
        },

3.4修改本地工具资源引用

 window.BMAP_PROTOCOL && "https" === window.BMAP_PROTOCOL && (window.HOST_TYPE = 2);
    D.$t = window.HOST_TYPE || "0";
    D.url = D.s0[D.$t];
    D.fp = D.url.proto + D.url.domain.baidumap + "/";
    D.nd = D.url.proto + ("2" == D.$t ? D.url.domain.main_domain_nocdn.other : D.url.domain.main_domain_nocdn.baidu) + "/";
    // D.oa = D.url.proto + ("2" == D.$t ? D.url.domain.main_domain_cdn.other[0] : D.url.domain.main_domain_nocdn.baidu) + "/";
    // D.oa = bmapcfg.home //修改 本地工具资源引用 (离线路径)
    D.oa = '/BMap_3.0/' // 修改,本地工具资源引用（离线路径）
    D.Yi = D.url.proto + D.url.domain.main_domain_cdn.webmap[0] + "/";

3.5修改加载瓦片图

这里是自己搭建的百度地图瓦片图文件资源服务器

pe.getTilesUrl = function(a, b, c) {
        var e = a.x
          , a = a.y
          , f = Tb("normal")
          , g = 1
          , c = oe[c];
        // this.map.mx() && (g = 2);
        // e = this.map.$e.gw(e, b).Zl;
        // return (ne[Math.abs(e + a) % ne.length] + "?qt=vtile&x=" + (e + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + g + (6 == A.fa.na ? "&color_dep=32&colors=50" : "") + "&udt=" + f + "&from=jsapi3_0").replace(/-(\d+)/gi, "M$1")
        
        // tdir = bmapcfg.tiles_dir.length>0?bmapcfg.tiles_dir:bmapcfg.home + "tiles";
        // return tdir + "/" + b + "/" + e + "/" + a + bmapcfg.imgext; // 使用本地的瓦片 
        
        return `http://localhost:8686/baiduMap/baidumaps/roadmap/${b}/${e}/${a}.png`//离线瓦片图
    };

此时应该有modules,bmap_offline_api_v3.0_min.js,map_load.js了,其他文件是根据自己所需引入的

4.修改index.html文件

在index.html通过script标签引入js文件,先引入bmap_offline_api_v3.0_min.js,其次是map_load.js

5.在vue创建地图

在模板里给地图一个容器

a-card(
      style='float: right;width: 70%;height: 588px;margin-top: 4%;margin-right: 5%;'
    )
      #mapShow

写一个创建地图的方法,具体方法可以去参考百度地图api示例,一般3.0向下兼容,具体要看各自的类参考

baiduMap() {
      let map = new window.BMap.Map('mapShow')

      // 左上角加入比例尺
      map.addControl(new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT }))

      map.setCurrentCity('温州')
      map.centerAndZoom(new window.BMap.Point(120.724759, 28.001661), 14)
      map.enableScrollWheelZoom(true)
      map.enableContinuousZoom() //启用地图惯性拖拽，默认禁用
      // map.addEventListener('click', function (e) {
      //   alert(e.point.lng + ',' + e.point.lat)
      // })

      var Navopts = {
        anchor: '',
        offset: new window.BMap.Size(10, 10), //控件的水平偏移值
        type: 'BMAP_NAVIGATION_CONTROL_LARGE', //平移缩放控件的类型
        //BMAP_NAVIGATION_CONTROL_LARGE  标准的平移缩放控件（包括平移、缩放按钮和滑块）
        //BMAP_NAVIGATION_CONTROL_SMALL  仅包含平移和缩放按钮
        //BMAP_NAVIGATION_CONTROL_PAN    仅包含平移按钮
        //BMAP_NAVIGATION_CONTROL_ZOOM   仅包含缩放按钮
        showZoomInfo: '', //是否显示级别提示信息
        enableGeolocation: '', //控件是否集成定位功能，默认为false
      }
      map.addControl(new window.BMap.NavigationControl(Navopts))
    },

在mounted里执行方法

mounted() {
    // console.log(window)
    // this.$nextTick(() => {
    this.baiduMap()
    // })
  },

控制容器布局,具体自己定

#mapShow {
  width: 100%;
  height: 540px;
  padding: 10px;
  position: relative;
}
/* 地图 */
/* .baiduMap{
        height: 100%;
        width: 100%;
    } */
/* 去除地图上，左下字体标注 */
.anchorBL {
  display: none;
}

三、效果图

总结

这样vue就可以展现离线的百度地图了,但是api还有许多方法还得个人亲自尝试,本人也是首次搭建,如有不足之处,还望多多包涵