vue集成百度离线地图

项目里集成了百度地图的一些功能，因客户方是内网项目，瓦片需要部署在本地，因此记录下在本地集成百度地图的需求的解决方法~~

1、下载npm地图包

npm i vue-baidu-map --S

2、配置webpack。例如vue-cli2，在webpack.base.conf配置BMap的依赖包变量

module.exports = {
  ...
  ...
  // 百度地图变量映射
  externals:{
    'BMap':'BMap'
  }
};

3、本地引入百度地图的api.js。

项目在通网的情况下是在index.html头部引入带ak密钥的百度api.js，例如:

但是这种方式内网下就不可用了，需要引入存在本地的api.js，下载的方法如下：

（1）复制上面script的路径到浏览器打开，然后再复制网页上返回的字段里一段script标签的src，这段url就是真正的api.js，下载后放到static文件夹里即可

（2）然后在index.html头部引入

4、在组件内使用

data() {
    retrun {
      // 初始化层级
      zoom: 8,
      // 本地地图瓦片路径
      MAP_SRC: 'htttp:127.0.0.1/jsmap/'  
    };
},
mounted() {
    this.map = this.mapInit("map_container", new BMap.Point(119.92, 32.49), this.zoom, this.MAP_SRC);
},
methods: {
    // 初始化地图
    mapInit(id, dPoint, dZoom, url) {
        if (!BMap) return;
        // 创建Map实例
        const map = new BMap.Map(/\#/.test(id) ? id.replace("#", "") : id);
        // 创建地图层实例
        const tilelayer = new BMap.TileLayer();
        // 地图瓦片地址层级zoom、x、y后缀
        tilelayer.getTilesUrl = function(tileCoord, zoom) {
        // 设置图块路径
        const half = Math.pow(2, zoom) * 0.5;
        const x = tileCoord.x + half;
        const y = -tileCoord.y - 1 + half;
        return url + zoom + "/" + x + "/" + y + ".png";
    };
    map.addTileLayer(tilelayer);
    map.centerAndZoom(dPoint, dZoom); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    return map;
    }
}

此时可以看百度的基本地图，如果还需要测距、比例尺等控件则需将对应的js下载并引入进组件