前言
刚毕业那会，入职公司第一天被临时从后端拉去前端帮忙，接手了类似链家地图找房功能，百度了一下，有在线实现的 vue-baidu-map 借鉴大佬的东西干了三周完成了，然后被告知地图要离线！！！这下网上教程要么不全，要么对于小白不够友好，没办法了，苦肝源码，后面终于肝了一个月做出来了！！！！目前项目保密期已经过了，为了方便后面像我一样的小白，就写了这篇保姆级别教学。。。。。
一、开发前准备🤗
1.准备好地图有关的js文件和相关模块💎💎💎💎💎
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: 点聚合相关
2.修改map_load.js文件 🍓🍓🍓🍓🍓
let bmapcfg = {
'imgext' : '.png', //瓦片图后缀
'tiles_dir' : 'tiles', //瓦片图文件夹
'tiles_path' : 'http://localhost:5000/', //如果在服务器上，需要配置服务器地址
'tiles_hybrid': '',
'tiles_self' : ''
};
将瓦片地图修改为自己的瓦片地址(瓦片一般比较大，存放在服务器比较好)
3.配置离线地图瓦片和有关JS文件 🥑🥑🥑🥑🥑
我是将瓦片和js文件用nginx部署，tile:离线地图瓦片资源(百度地图)，下面两个JS文件是地图有关的，上面有介绍。
在D:\home\nginx-1.16.1\conf目录下，复制一份nginx.conf修改如下配置。
最后保存为自定义文件名
4、下载地图瓦片 😍😍😍😍😍
自己可以根据网上有关下载软件，下载百度地图瓦片，这里放一个我自己用的这个瓦片是V1.0版本略丑
下面这个是借鉴别人的下载Jar包，V3.0版本
修改配置文件：
5、在项目中引入文件
在项目中public/Statc下引入有关地图瓦片资源
在index.html下引入JS文件
其中RichMarker.min.js文件，为富文本标记所用Js,可根据需要引入
注：部分BMapGLLib可能不能使用，需替换为BMap来使用，上面JS文件已处理好了。
6.项目效果
绘制气泡后项目效果
绘制气泡部分代码：
//绘制省级drawprivo(){
for (let vo of this.provPoints) {
let html = "
";let marker = new window.BMapGLLib.RichMarker(html, new window.BMap.Point(vo.lng, vo.lat));
// console.log("看看css生效了嘛",marker) this.map.addOverlay(marker);
marker.addEventListener("onmousedown",()=>{
console.log("onmousedown市级")
this.cilkqiflage =1 this.clearMapMarker()
//重新定位地图区域 let point = new window.BMap.Point(vo.lng, vo.lat) // 创建点坐标 console.log("切换后的经纬度",point)
this.map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别 this.cityvalue = vo.regionId this.addMarker()
})
}
},
## 补充：💕💕💕💕💕💕💕💕💕
第一步地图资源图标和有关modules文件：
[百度云盘资源](%E9%93%BE%E6%8E%A5%EF%BC%9Ahttps://pan.baidu.com/s/1qgBL-KXTkrtOg-nOOnQKeQ?pwd=rnuu)
将文件放在public/static文件价下。