公司近段时间在搞离线地图，开发离线地图我目前知道的有两种方法：

1、把全国每个城市经纬度坐标拿到利用highcharts渲染到页面
2、下载地图瓦片使用百度、高德…读取瓦片数据渲染到页面

今天主要说一下百度地图加载离线瓦片并标点、连线

1、首先要下载百度离线文件

2、使用瓦片下载器下载需要的瓦片、下载后可以把瓦片放到本地也可以放到服务器、我把百度离线文件和瓦片下载器放到网盘上有需要的可以下载（下载后可直接使用）

链接：https://pan.baidu.com/s/14WrA1Gtx84qMh-pZVbT3jw
提取码：6666

3、瓦片做nginx代理

在这里插入图片描述

4、把百度离线文件放到static文件夹下、并修改百度离线文件map3.0_init.js（如果放到本地可直接写文件目录）

在这里插入图片描述

5、在index.html文件中引入离线文件

在这里插入图片描述

6、渲染地图并标点、连线


<template><div class="Hbox" :style="{width:(Mapwidth-230)+'px'}" id="Hbox"><div class="mapBOX" id="GDcontainer"></div></div>
</template><script>
var map;
export default {data() {return {Mapwidth: document.documentElement.clientWidth,mapList: [],};},mounted() {this.initAMap()this.init()},created() {},watch: {Mapwidth: (val) => {var newWidth = document.getElementById("Hbox")if (newWidth) {newWidth.style.width = Number(val) + 'px'}},},methods: {initAMap() {// 百度地图API功能map = new BMap.Map("GDcontainer", { minZoom: 0, maxZoom: 13 }); // 创建Map实例（minZoom、maxZoom：设置地图最小、最大缩放级别）map.centerAndZoom(new BMap.Point(107.505583, 26.317692), 10); // 设置中心点//先清除所有内容map.clearOverlays();map.enableScrollWheelZoom();     //开启鼠标滚轮缩放},init() {this.mapList = [{ lng: '107.505583', lat: '-26.317692', listType: 1 },{ lng: '107.51775', lat: '-26.365743', listType: 1 },{ lng: '107.524074', lat: '-26.399921', listType: 1 },{ lng: '107.549371', lat: '-26.452722', listType: 4 },{ lng: '107.563168', lat: '-26.488426', listType: 5 },{ lng: '107.570642', lat: '-26.50705', listType: 4 },]let newdatas = []this.mapList.forEach((item, index) => {if (item.lat != null) {//---------------------------------标点开始---------------------------------let point = new BMap.Point(item.lng, 0 - (item.lat))let myIcon = new BMap.Icon(`require('../../assets/svg/point.svg')`, new BMap.Size(23, 27));myIcon.setImageSize(new BMap.Size(23, 28));let label = new BMap.Label(`添加文本`, {       // 创建文本标注position: point,                          // 设置标注的地理位置offset: new BMap.Size(-6, -11)           // 设置标注的偏移量})let marker = new BMap.Marker(point, { icon: myIcon })map.addOverlay(marker)map.addOverlay(label)label.setStyle({                              // 设置label的样式color: '#000',fontSize: '10px',border: '0px solid #1E90FF',background: 'transparent',})//---------------------------------标点结束---------------------------------//---------------------------------连线开始---------------------------------newdatas.push(new BMap.Point(item.lng, 0 - (item.lat)),)//---------------------------------连线结束---------------------------------}})var polyline = new BMap.Polyline(newdatas, { strokeColor: "#F59A23", strokeWeight: 2, strokeOpacity: 1 });map.addOverlay(polyline);}},
}
</script>
<style lang='scss' scoped>
.mapBOX {height: 100%;width: 100%;
}
</style>