前言： 公司要求对项目进行更换地图服务，以前用的是高德和百度，现在更换成BigeMap来提供地图服务，地图瓦片数据均需要自己下载放在服务器上。
ps： 官方的文档一言难尽，比起高德和百度的文档不要太烧脑，以下是整理出来的vue中初始化方法，比较详细。
1.js中加载资源(包括css文件和js文件)
const scriptList = [`:9000/bigemap.js/v2.1.0/bigemap.js`,'/fly/echarts.min.js','/fly/iclient9.min.js']// 引入所需的js文件，可以将地址换成本地服务器的js文件地址 // 如果有多个js文件(比如你需要实现模拟迁徙的效果也可以用逗号隔开进行引入// 这里我是将模拟迁徙效果的两个js下载在本地保存在项目的public文件夹下的fly文件夹中)const linkList = [`:9000/bigemap.js/v2.1.0/bigemap.css`]// 引入css样式文件，可以将地址换成本地服务器的css文件地址// 需要用Promise进行包裹保证在未来一定能获取到异步操作的消息// 简单来说就是保证在初始化地图时保证已经完成了相关js和css文件引入的操作export default new Promise((resolve) => {linkList.map((v, index) => {// 根据元素的id获取元素对象，判断是否已经进行引入操作const has = document.getElementById(`bigemap_link_${index}`)if (has) returnconst link = document.createElement('link') // 创建link标签link.rel = 'stylesheet' // 表示link链接的是一个样式表(只有stylesheet值得到所有浏览器支持)link.async = false // 非异步 link 即会等待请求完此资源后再继续解析HTMLlink.href = vlink.id = `bigemap_link_${index}`document.head.appendChild(link) // 将link标签作为子标签插入head标签下})const loads = scriptList.map((v, index) => {// 根据元素的id获取元素对象，判断是否已经进行引入操作const has = document.getElementById(`bigemap_script_${index}`)if (has) returnconst script = document.createElement('script') // 创建script标签script.type = 'text/javascript' // script标签的MIME 类型script.id = `bigemap_script_${index}`script.async = false // 非异步 link 即会等待请求完此资源后再继续解析HTMLscript.src = vdocument.head.appendChild(script) // 将script标签作为子标签插入head标签下return script })// 判断loads是否存在 if (loads) {const end = loads.pop()end.onload = resolve // 将resolve函数作为onload事件的回调函数，当onload事件触发时resolve函数将会被调用 //onload用于在网页加载完毕后立刻执行的操作避免调用DOM树中元素时发生undefined的错误} else {resolve()}})
2.地图的初始化
创建div标签作为地图的容器<div id='map' ref='map'></div>
导入我们刚刚创建的js文件(bigemap.js)
import bigemap from '@/api/bigemap' //这里注意换成自己的js文件地址
初始化地图
<script>import bigemap from '@/api/bigemap'export default {data() {bm: '',map: '',},mounted() {this.initMap()},methods: {initMap() {bigemap.then(()=>{this.bm = window.BM// 这里URL填写的是离线地图的服务器地址this.bm.Config.HTTP_URL = ':9000' // 参数分别为 // DOM元素 可以用this.$ref.标签的ref值获取也可以直接为标签的id属性例如"map"// 地图样式id// 初始化地图的选项this.map = this.bm.map(this.$refs.map,'bigemap.googlemap-streets',{center: [ 30,104 ], // 中心点的坐标[纬度,经度]zoom: 4, // 缩放级别zoomControl: false // 缩放控件是否可见})// 这下面可以接之后的操作例如添加锚点的方法、添加图层等等})}}}</script>
3.map的常用选项
4.关于水印
水印的去除可以在css样式或者<style>标签中使用下面的代码
::v-deep .bigemap-left {display: none;}::v-deep .bigemap-control{display: none;}
