【web百度离线地图开发】原生实现百度地图离线版速览

需求如下，在基于在线地图的基础上展现离线地图

//在线用以下插件展示
    "vue-baidu-map": "^0.21.22",

---

vue中展示离线地图

第一步:把配置好的离线地图文件拖入public文件夹下

第二步：
index.html中引入

第三步：
下载瓦片存放在nginx搭建的服务器上瓦片的存放，交给后端，前端只需要知道瓦片存放路径即可


第四步：

传送门
vue页面中创建百度地图实例对象

     this.BMap = BMap
      // 创建地图实例
      this.map = new BMap.Map('mapShow')
      // 创建点坐标
      const point = new BMap.Point(this.center.lng, this.center.lat)
      // 初始化地图，设置中心点坐标和地图级别
      this.map.centerAndZoom(point, 16)
      // 开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true)
      this.map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT }))

在我的资源可以自行下载js文件