- 首先在百度地图开发者平台注册微信小程序开发密钥
- 下载百度地图SDK-bmap-wx.min.js,下载地址
- 在项目入口index.html页面进行引入
- 页面中进行调用,代码示例如下
<map id="map" longitude="108.95" latitude="34.34" scale="3" :markers="markers" @markertap="onMarkerTap" style="height: 98vh;width: 100%;" > </map>
import {
ledgerList,
} from "@/api/postList.js"
onLoad() {
this.getledgerList()
},
methods: {
getledgerList(){
ledgerList().then(res => {
if (res.code == 200) {
const deviceLocation = res.data
this.markers = deviceLocation.map(item => ({
id: item.id,
latitude: item.positionLat,
longitude: item.positionLng,
title: item.deviceNo,
label: {
content: item.deviceNo, // 替换为实际设备号
color: '#FF2400',
fontSize: 16,
borderWidth: 1,
borderColor: '#FFFFFF',
anchorX: -70,
anchorY: 0
},
width: 30,
height: 30,
iconPath: '/static/images/map.png' // 设备图标路径
}));
// console.log(this.markers,'this.markers')
utils.showToast('请求成功')
} else {
utils.showToast(res.message)
}
})
}
}
展示效果如下: