vue+百度地图根据后端返回的经纬度坐标实现地图点位添加

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) // 开启信息窗口
				})
			})
		},