3.jpg

vue的百度地图早就有vue-baidu-map这里就不赘述了，

自己去直接对着API写就好了，基本上已经满足绝大多数需求了还简单方便。

vue-baidu-map 传送门 https://dafrok.github.io/vue-baidu-map/#/zh/index

这里主要是在vue里面引入BMapGL，或者其他个性化地图。

另外还有一篇文章是更加去全面的关于 BMapGL + BMapGLLib 引入的： vue引入百度地图BMapGL，以及辅助工具BMapGLLib 的引入，BMapGL鼠标绘制功能。

因为异步的问题直接index.html引入会报错，所以采用以下方式

关于地图异步这个问题这里啰嗦一下(年纪大了就是喜欢啰嗦？)：

地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例。百度地图组件是异步加载，请不要尝试在组件的生命周期中访问 BMap 核心类和 map 实例，如有需要，请在所需组件的 ready 事件回调函数的参数中获取。

——【vue-baidu-map，全局组件事件】

地图没有生成的时候不要进行任何对地图的操作。

譬如说你的坐标中心点初始化是要从后台获取数据进行初始化定位的。

一定要等到地图渲染完成以后再进行操作。也就是关于地图的初始化数据接口的请求要放在地图ready里面。(这方面出错容易引起的错误例子：一开始地图空白，刷新一下就好了什么的。。。map报错。map, BMap,undefined什么的。。。。)

文件源码地址

文件结构图解

文件结构图解.png

在src里面创建一个bmpgl.js

其实建立在哪看你自己的意愿啦。(小声逼逼)

// bmpgl.js

export function BMPGL(ak) {

return new Promise(function(resolve, reject) {

window.init = function() {

// eslint-disable-next-line

resolve(BMapGL)

}

const script = document.createElement('script')

script.type = 'text/javascript'

script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`

script.onerror = reject

document.head.appendChild(script)

})

}

vue页面里面引入

import { BMPGL } from "@/bmpgl.js"

export default {

name: "home",

data() {

return {

ak: "XXXXXXXXX", // 百度的地图密钥

myMap: null

};

},

mounted() {

this.initMap()

},

methods: {

initMap() {

// 传入密钥获取地图回调。

BMPGL(this.ak).then((BMapGL) => {

// 创建地图实例

let map = new BMapGL.Map("container");

// 创建点坐标 axios => res 获取的初始化定位坐标

let point = new BMapGL.Point(114.031761, 22.542826)

// 初始化地图，设置中心点坐标和地图级别

map.centerAndZoom(point, 19)

//开启鼠标滚轮缩放

map.enableScrollWheelZoom(true)

map.setHeading(64.5)

map.setTilt(73)

// 保存数据

// this.myMap = map

})

.catch((err)=>{

console.log(err)

})

},

}

};

.allmap {

width: 100%;

height: 100vh;

position: relative;

z-index: 1;

}