1.效果图

2.准备工作 public/index

<script src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=sRDDfAKpCSG5iF1rvwph4Q95M6tDCApL"></script>  

3.html

<div id="vehicleMap"></div>

4.js

data() {return {url: '/api/sysHomepagesignin/list',// 页面查询数据queryData: {limit: 10,page: 1,totalRecord: 0,startTime: '2020-01-01',endTime: '2020-01-01'},map: '',}},
// 初始化地图initMap() {var map = new BMapGL.Map('vehicleMap') // 创建Map实例map.centerAndZoom(new BMapGL.Point(120.214935, 30.256576), 12) // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放this.map = map},// 地图点位数据async getMapData() {let result = await gcDispenserApi.getData(this.url, this.queryData)let data = result.data.list// 创建点标记// var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925))data.map(item => {var point = new BMapGL.Point(item.signlongitude,item.signlatitude)var marker = new BMapGL.Marker(point)// 在地图上添加点标记this.map.addOverlay(marker)// 创建信息窗口var opts = {width: 200,height: 100,title: `${item.username}`}var infoWindow = new BMapGL.InfoWindow(`地址:${item.signaddress}`,opts)// 修改信息窗口标题和内容样式infoWindow.setTitle(`<p style="font-size:14px;margin-bottom:15px;color:#000">${item.username}</p>`)infoWindow.setContent(`<div><p style='font-size:12px;line-height:20px;color:red'>地址:${item.signaddress}</p></div>`)// 点标记添加点击事件marker.addEventListener('click', function() {this.map.openInfoWindow(infoWindow, point) // 开启信息窗口})})},