当前位置: 首页 > news >正文

使用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.datathis.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)}})}}

展示效果如下:

在这里插入图片描述

http://www.lryc.cn/news/500264.html

相关文章:

  • ubuntu22.04 使用可以用的镜像源获取你要的镜像
  • Flume——sink连接hdfs的参数配置(属性参数+时间参数)
  • python+docker实现分布式存储的demo
  • go-blueprint create exit status 1
  • 如何更改Git用户名 - 本地与全局设置指南
  • Node.js JWT认证教程
  • 【青牛科技】应用于音频信号处理系统的D258 是由两个独立的高增益运算放大器组成
  • HTML Input 文件上传功能全解析:从基础到优化
  • 小程序 —— Day1
  • 4.5 TCP 报文段的首部格式
  • SQL 获取今天的当月开始结束范围:
  • Qt复习学习
  • Leetcode经典题5--轮转数组
  • C++的一些经典算法
  • Windows环境中Python脚本开机自启动及其监控自启动
  • XML 语言随笔
  • E卷-分割数组的最大差值
  • 基于SpringBoot校园台球厅人员与设备管理系统设计与实现
  • 异步FIFO的实现
  • 关于找工作的一些感悟
  • docker 相关问题记录
  • Devops 实践
  • MySQL 索引(B+树)详解
  • 医疗系统国产数据库高质量发展路径探析
  • 微信小程序报错:http://159.75.169.224:7300不在以下 request 合法域名列表中,请参考文档
  • 智能租赁管理系统助力规范化住房租赁市场提升用户体验
  • MicroBlaze软核开发(一):Hello World
  • 跟着问题学15——GRU网络结构详解及代码实战
  • 【uniapp】swiper切换时,v-for重新渲染页面导致文字在视觉上的拉扯问题
  • 【Android】Compose初识