Vue项目集成百度离线地图

工作中遇到了一个需求          ，要在内网使用百度地图 
 
  
 
  
 
  
 
  
 
，那么肯定就是离线的地图了








，查阅了一些博文
  
  
  
  
  ，开发过程中也遇到了各种各样的问题 
  
  
  
  
，在此做下记录 


 


 


 


 

，希望带大家避坑
 
 
 
 
 ，也给自己这两天的开发做一下总结  
  
  
  
  。

需求：

内网中使用百度地图

仅展示郑州市地图  
   
   
   
   
，并将郑州市地图轮廓圈出

支持绘制点

支持绘制线

支持多点聚合

技术栈 Vue2 BMap 效果图 开始 1          、项目搭建

vue脚手架搭建不再赘述 

 

 

 

 
，默认此刻你已经创建好一个vue-cli项目

 

 

 

 

 ，此时         ，在public文件夹下创建文件夹static 
 

 
 

 
 

 
 

 
 
，将我们所需要的资源放到这个文件夹里









，文件后续有给出 
  
  
  
  
 。注意路径              ，一定注意路径 
 
 
 
 
 
 
 
 
 
，踩坑很久













，文件中路径已经改好


 


 


 


 


。

2 
 
  
 
  
 
  
 
  
 
、文件说明及避坑大法 images：地图中图标          ，例如：树








、建筑物等 modules： 所需要的js模块 bmap_offline_api_v3.0.min.js: 创建地图 
 
  
 
  
 
  
 
  
 
，包含各种地图上操作的api等 m4.png: 聚合图标








，上图中的紫色图（可根据项目风格进行替换） map_load.js: 初始化一些全局变量
  
  
  
  
  ，包括文件路径 
  
  
  
  
，瓦片图加载路径 


 


 


 


 

，动态加载bmap_offline_api_v3.0.min.js文件等 MarkerClusterer_min.js: 实现点聚合 TextIconOverlay_min.js: 点聚合相关

修改直通车：

1
  
  
  
  
  、瓦片图路径处理

map_load.js,在网上看博主写的配置有tiles_dir,但是没有tiles_path,就意味着只能将瓦片图放置到自己项目中
 
 
 
 
 ，图片有很多很多  
   
   
   
   
，vue项目直接编译崩溃 

 

 

 

 
，所以为了开发方便

 

 

 

 

 ，我们还是将瓦片图放置到服务器中         ，我们这边做引入即可 
 
 
 
 。在tiles_path中进行配置服务器地址  
   
   
   
   
 。

踩坑1：注意：一定不要只对照map_laod.js来配置自己的js 
 

 
 

 
 

 
 

 
 
，一定要看bmap_offline_api_v3.0.js中瓦片地址的配置方法

let bmapcfg = { imgext : .png, //瓦片图后缀 tiles_dir : tiles, //瓦片图文件夹 tiles_path : http://localhost:5000/, //如果在服务器上









，需要配置服务器地址 tiles_hybrid: , tiles_self : };

对应bmap_offline_api_v3.0.js中模块加载代码              ，注意：你的可能跟我的不一样 
 
 
 
 
 
 
 
 
 
，一定要跟map_load.js进行对应

 

 

 

 

。

var tdir = bmapcfg.tiles_path ? (bmapcfg.tiles_path + bmapcfg.tiles_dir) : bmapcfg.tiles_dir return tdir + / + b + / + e + / + a + bmapcfg.imgext // 使用本地的瓦片

当然了













，开发阶段我们可以先将瓦片图下载到本地          ，新建文件夹 dirName,

然后在对应文件夹中使用：serve 你的文件夹名开启本地服务 
 
  
 
  
 
  
 
  
 
，此刻








，图片也可以用链接地址进行访问了

此刻配置我们的瓦片路径： let bmapcfg = { imgext : .png, //瓦片图后缀 tiles_dir : tiles, //普通瓦片图的地址
  
  
  
  
  ，为空默认在 offlinemap/tiles/ 目录 tiles_path : http://localhost:5000/, ... }; 2 
  
  
  
  
、模块加载路径配置

bmap_offline_api_v3.0.js

我们的模块地址放置在 modules文件夹下 
  
  
  
  
，所以配置如下：

// 修改 加载本地模块文件 


 


 


 


 

，在 modules 目录下 console.log(a) //打印所需模块 if (a.length > 0) { for (i = 0; i < a.length; i++) { mf = bmapcfg.home + modules/ + a[i] + .js oa(mf) } } else { f.kL() } 3 


 


 


 


 

、地图加载不出来

注意：瓦片图路径出错会导致地图加载出错
 

 

 

 

 。一定要看配置路径
 
 
 
 
 ，js加载不到也是路径问题  
   
   
   
   
，路径问题！！！！

3
 
 
 
 
 、地图搭建准备工作 1  
   
   
   
   
、容器

跟平时一样 

 

 

 

 
，准备一个地图容器

 

 

 

 

 ，设置容器大小

<template> <div class="home"> <div id="container"></div> </div> </template> <script> .... </script> <style lang="scss"> #container { height: 100vh; width: 100vw; } </style> 2 

 

 

 

 
、初始化 data() { return { map: null, mapPoints: [], markerClusterer: [], } },

初始化地图

initMap() { let BMap = window.BMap this.map = new BMap.Map(container) console.dir(this.map) let point = new BMap.Point(113.5001, 34.60468) // 创建点坐标 this.map.centerAndZoom(point, 10) // 初始化地图         ，设置中心点坐标和地图级别 //添加地图类型控件 this.map.setMinZoom(10) this.map.setMaxZoom(18) this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放 // 添加点 this.addMarker() // 添加线 this.addLine() // 添加郑州市的轮廓线 this.addBorderLine() }, 3

 

 

 

 

 、添加点         、添加点聚合 addMarker() { let BMap = window.BMap let BMapLib = window.BMapLib // 初始化要显示的点的坐标 this.initPoints() let mapMarkers = [] this.mapPoints.forEach((point) => { let marker = new BMap.Marker(point) mapMarkers.push(marker) this.map.addOverlay(marker) }) let markerClusterer = new BMapLib.MarkerClusterer(this.map, { markers: mapMarkers, styles: [ { url: ./static/m4.png, size: new BMap.Size(90, 90), }, ], }) markerClusterer.setMinClusterSize(2) this.markerClusterer = markerClusterer }, initPoints() { let BMap = window.BMap var point = new BMap.Point(113.5001, 34.60468) // 创建点坐标 var point1 = new BMap.Point(113.6001, 34.61468) // 创建点坐标 var point2 = new BMap.Point(113.7001, 34.62468) // 创建点坐标 var point3 = new BMap.Point(113.9001, 34.63468) // 创建点坐标 this.mapPoints.push(point) this.mapPoints.push(point1) this.mapPoints.push(point2) this.mapPoints.push(point3) }, 4 
 

 
 

 
 

 
 

 
 
、添加线 addLine() { let BMap = window.BMap let point = new BMap.Point(113.5001, 34.60468) // 创建点坐标 let point1 = new BMap.Point(113.7001, 34.62468) // 创建点坐标 let polyline = new BMap.Polyline([point, point1], { strokeColor: red, strokeWeight: 1, strokeOpacity: 1, }) this.map.addOverlay(polyline) }, 5









、绘制城市边缘

这个数据我们可以通过在线地图API进行获取 
 

 
 

 
 

 
 

 
 
，获取到以后将数据保存到文件line.js中









，将文件放置项目src/data文件夹下              ，便于我们离线使用

let boundary = new BMap.Boundary() boundary.get(郑州市, (rs) => { // res: 郑州市边缘数据 })

添加边缘数据：

addBorderLine() { let BMap = window.BMap let pointArr = [] dataLine.forEach((pointDetail) => { var point = new BMap.Point(pointDetail.lng, pointDetail.lat) // 创建点坐标 pointArr.push(point) }) let polyline = new BMap.Polyline(pointArr, { strokeColor: red, strokeWeight: 3, strokeOpacity: 1, }) this.map.addOverlay(polyline) }

奉上项目地址：https://gitee.com/shanghaipingzi/offlinebmap

瓦片图下载

提取百度网盘中文件 
 
 
 
 
 
 
 
 
 
，然后运行exe文件













，选择要下载的层级及地区即可

百度网盘链接：https://pan.baidu.com/s/16sOJ9ws7HCgNH3EMf7Ejyg?pwd=0q0e 提取码：0q0e

有问题欢迎评论区留言

文章借鉴了一个博主离线地图的开源代码          ，博主是在纯html中进行开发的 
 
  
 
  
 
  
 
  
 
，我这边在此基础之上集成到了vue中








，并添加了我们的需求实现
  
  
  
  
  ，查看的链接太多了 
  
  
  
  
，如果有幸入了博主的法眼 


 


 


 


 

，私聊挂链接哈！再次感谢博主！