Vue使用BMapGL，及marker简单使用

1、封装加载器

export function BMapLoader(ak) {return new Promise((resolve, reject) => {if (window.BMapGL) {resolve(window.BMapGL)} else {const script = document.createElement('script')script.type = 'text/javascript'script.src = 'https://api.map.baidu.com/api?v=1.0&type=webgl&callback=initBMap&ak=' + akscript.async = truescript.onerror = rejectdocument.head.appendChild(script)}window.initBMap = function () {resolve(window.BMapGL)}})}

2、初始化地图

initEcharts() {this.$nextTick(() => {BMapLoader('UdQGUa0BgiwGEvGs5aQHLCasM5LEEpTO').then(BMapGL => {const map = new BMapGL.Map('echarts1', { enableMapClick: false })this.map = mapmap.disableKeyboard() // 禁用键盘操作地图map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放// 添加中心点和缩放等级，如果不添加，初始化出来页面为白屏const point = new BMapGL.Point(116.280190, 40.049191)map.centerAndZoom(point, 15)map.enableScrollWheelZoom(true);map.setHeading(64.5);
map.setTilt(73);})})},

html

 <div id="echarts1" style="width: 100%; margin-bottom: 20px"></div>

3、简单使用

1）地图点击事件（我们可以从返回值event中获取经纬度）

map.addEventListener('click', function(e) {console.log(e);
});

2）创建一个位置

 const point = new BMapGL.Point(116.280190, 40.049191)

3）在位置上创建一个标记点

let marker = new BMapGL.Marker(point);  
map.addOverlay(marker);  

4）创建一个信息框

let opts = {width: 250,     // 信息窗口宽度height: 100,    // 信息窗口高度
}
let infoWindow = new BMapGL.InfoWindow("采集点：23<br/>电耗：2901.9kwh<br/>全校占比：10.9%", {...opts,...{title: "综合楼"}}); 

5）将信息框的点击事件绑定到标记点上

marker.addEventListener("click", function(){          map.openInfoWindow(infoWindow, point); //开启信息窗口});