前端项目加载离线的百度地图，利用工具进行切指定区域的地图影像，自定义图层getTilesUrl

<style scoped>
#baiduMap {
  height: 100%;
  width: 100%;
}

</style>

<template>
  <div id="baiduMap"></div>
</template>

<script>
import $ from 'jquery'
/* eslint-disable */
export default {
  name:'baiduMap',
  data(){
    return{
      url:'http://api.map.baidu.com/api?v=3.0&ak=你自己申请的秘钥&callback=createMap'
    }
  },
  mounted(){
    this.initMap()
  },
  methods:{
    addBaiDuAPI(url){
      return new Promise((resolve)=>{
        let script = document.createElement("script");
        script.src = url;
        document.body.appendChild(script);
        resolve()
      })
    },
    async initMap() {
      const maxZoom =19;
      let that = this;
      await that.addBaiDuAPI(that.url);

      //百度地图加载成功，会回调createMap这个函数
      window.createMap = () => {
        window.BMAP_NORMAL_MAP.m.X3 = window.BMAP_NORMAL_MAP.m.mc = window.BMAP_NORMAL_MAP.m.maxZoom = window.BMAP_PERSPECTIVE_MAP.m.X3 = window.BMAP_PERSPECTIVE_MAP.m.mc = window.BMAP_PERSPECTIVE_MAP.m.maxZoom = window.BMAP_SATELLITE_MAP.m.X3 = window.BMAP_SATELLITE_MAP.m.mc = window.BMAP_SATELLITE_MAP.m.maxZoom = window.BMAP_HYBRID_MAP.m.X3 = window.BMAP_HYBRID_MAP.m.mc = window.BMAP_HYBRID_MAP.m.maxZoom = maxZoom;
        //创建Map实例
        let map = new BMap.Map("baiduMap", {minZoom: 3, maxZoom: 19}); // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 创建点坐标,初始化地图,设置中心点坐标和地图级别
        map.setMapType(BMAP_NORMAL_MAP);
        window.baiduMap = map; //存储到全局变量baiduMap
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.enableInertialDragging(); //两秒后开启惯性拖拽
        setTimeout(function (){
          //添加地图类型控件
          map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));
          map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
          //地图类型，地图，卫星
          var size = new BMap.Size(20, 220);
          map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: size,}));
          map.addEventListener("mousemove", function (e) {$(".BMap_cpyCtrl").text("鼠标位置：" + e.point.lng + "," + e.point.lat)});
          //城市控件
          size = new BMap.Size(70, 10);
          map.addControl(new BMap.CityListControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: size,}));
          /**
           map.addEventListener("zoomend", function() {
                let zoom = map.getZoom();
                map.centerAndZoom((new BMap.Point(lon, lat)),zoom)
              });
           **/
        },300)
      };
    },
  }
}
</script>

运行加载效果