Bootstrap

使用uniapp开发小程序场景:在百度地图上调用接口返回的设备相关信息并展示

  1. 首先在百度地图开发者平台注册微信小程序开发密钥
  2. 下载百度地图SDK-bmap-wx.min.js,下载地址
  3. 在项目入口index.html页面进行引入
  4. 页面中进行调用,代码示例如下
  5. <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)
			        }
			    })
				
		  }
	}

展示效果如下:

在这里插入图片描述

;