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=' + ak
        script.async = true
        script.onerror = reject
        document.head.appendChild(script)
      }
      window.initBMap = function () {
        resolve(window.BMapGL)
      }
    })
  }

2、初始化地图

initEcharts() {
      this.$nextTick(() => {
        BMapLoader('你的key').then(BMapGL => {
          const map = new BMapGL.Map('echarts1', { enableMapClick: false })
          this.map = map
          map.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); //开启信息窗口
	});