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

展示效果如下:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/930866.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Push an existing folder和Push an existing Git repository的区别

Push an existing folder 和 Push an existing Git repository 是在使用 Git 服务&#xff08;如 GitHub、GitLab、Bitbucket 等&#xff09;时两个常见的操作选项。它们的区别主要体现在项目的初始化和版本控制状态上&#xff1a; 1. Push an existing folder 适用场景&#…

机器学习详解(2):线性回归之理论学习

文章目录 1 监督学习2 线性回归2.1 简单/多元线性回归2.2 最佳拟合线2.3 成本函数和梯度下降2.4 线性回归的假设2.5 线性回归的评估指标函数 3 总结 机器学习是人工智能的一个分支&#xff0c;主要致力于开发能够从数据中学习并进行预测的算法和统计模型。线性回归是机器学习的…

ASP.NET Core8.0学习笔记(二十五)——EF Core Include导航数据加载之预加载与过滤

一、导航属性数据加载 1.在EF Core中可以使用导航属性来加载相关实体。 2.加载实体的三种方式&#xff1a; (1)预先加载&#xff1a;直接在查询主体时就把对应的依赖实体查出来&#xff08;作为初始查询的一部分&#xff09; (2)显式加载&#xff1a;使用代码指示稍后显式的从…

QT实战--带行号的支持高亮的编辑器实现(1)

本文主要介绍了基于QPlainTextEdit实现的&#xff0c;带有行号的,支持高亮的编辑器实现&#xff0c;话不多说&#xff0c;先上效果图&#xff1a; 1.行号头文件&#xff1a;linenumberarea.h #ifndef LINENUMBERAREA_H #define LINENUMBERAREA_H#include <QWidget> #inc…

基于Matlab的卷积神经网络(CNN)苹果分级检测系统

本研究提出了一种基于卷积神经网络&#xff08;CNN&#xff09;的自动化苹果分级系统&#xff0c;该系统根据苹果的视觉特征进行分类。系统采用了预训练的深度学习模型&#xff0c;使用包含不同等级苹果的图像数据集进行训练。研究方法包括图像预处理、特征提取和苹果等级分类。…

华为、华三交换机纯Web下如何创关键VLANIF、操作STP参数

华为交换机WEB操作 使用的是真机S5735&#xff0c;目前主流的版本都适用&#xff08;V1R5~V2R1的就不在列了&#xff0c;版本太老了&#xff0c;界面完全不一样&#xff0c;这里调试线接的console口&#xff0c;电脑的网络接在ETH口&#xff09; 「模拟器、工具合集」复制整段内…

ACM:均分纸牌

主要思路 整体思路概述&#xff1a; 本题旨在解决给定N堆纸牌&#xff08;纸牌总数是N的倍数&#xff09;&#xff0c;通过按照特定移牌规则移动纸牌&#xff0c;找出用最少移动次数使每堆纸牌数量相等的方法。程序采用了一种逐步调整的思路&#xff0c;先计算出每堆纸牌应有的…

定时任务——xxl-job源码解析

摘要 本文深入解析了xxl-job的源码&#xff0c;xxl-job是一个分布式任务调度平台&#xff0c;其核心设计思想是将调度行为抽象成“调度中心”&#xff0c;而任务逻辑则由“执行器”处理&#xff0c;实现调度与任务的解耦。文章详细介绍了调度器和执行器的初始化流程、任务执行…

vxe-table 键盘操作,设置按键编辑方式,支持覆盖方式与追加方式

vxe-table 全键盘操作&#xff0c;按键编辑方式设置&#xff0c;覆盖方式与追加方式&#xff1b; 通过 keyboard-config.editMode 设置按键编辑方式&#xff1b;支持覆盖方式编辑和追加方式编辑 安装 npm install vxe-pc-ui4.3.15 vxe-table4.9.15// ... import VxeUI from v…

乾元通渠道商中标福州市人防信息化建设项目

乾元通渠道商中标福州市人防信息化建设项目&#xff0c;乾元通作为应急通讯设备厂家&#xff0c;为项目提供车载版多链路聚合通信保障设备 QYT-X1s。 青岛乾元通数码科技有限公司作为国家应急产业企业&#xff0c;深耕于数据调度算法研究&#xff0c;参与了多项国家及省部级信息…

【深度学习|地学应用-地震气溶胶异常解析3】气溶胶异常是地震的前兆现象之一!地震是如何影响气溶胶浓度和分布的异常变化的呢,我们该如何分析?

【深度学习|地学应用-地震气溶胶异常解析3】气溶胶异常是地震的前兆现象之一&#xff01;地震是如何影响气溶胶浓度和分布的异常变化的呢&#xff0c;我们该如何分析&#xff1f; 【深度学习|地学应用-地震气溶胶异常解析3】气溶胶异常是地震的前兆现象之一&#xff01;地震是…

C++析构函数和构造函数

一、构造函数 1.构造函数的基本概念 1.对构造函数的理解&#xff1a; 构造函数是类的一种特殊成员函数&#xff0c;其主要功能是在创建对象时进行初始化操作。它的名字与类名相同&#xff0c;并且没有返回值类型&#xff08;不能是void&#xff09;。例如&#xff0c;对于一个…

【python自动化四】日志打印

我们在进行自动化测试时&#xff0c;需要打印过程日志和结果日志等&#xff0c;这里记录下日志的相关配置。这里我们直接自己新建一个logger。 先贴上日志代码如下&#xff0c;可根据需要修改&#xff1a; import logging import os import timefrom logging.handlers import …

鸿蒙分享(一):添加模块,修改app名称图标

码仓库&#xff1a;https://gitee.com/linguanzhong/share_harmonyos 鸿蒙api:12 新建公共模块common 在entry的oh-package.json5添加dependencies&#xff0c;引入common模块 "dependencies": {"common": "file:../common" } 修改app名称&…

IDE如何安装插件实现Go to Definition

项目背景 框架&#xff1a;Cucumber Cypress 语言&#xff1a;Javascript IDE&#xff1a;vscode 需求 项目根目录cypress-automation的cypress/integration是测试用例的存放路径&#xff0c;按照不同模块不同功能创建了很多子目录&#xff0c;cucumber测试用例.feature文…

【机器学习】CatBoost 模型实践:回归与分类的全流程解析

一. 引言 本篇博客首发于掘金 https://juejin.cn/post/7441027173430018067。 PS&#xff1a;转载自己的文章也算原创吧。 在机器学习领域&#xff0c;CatBoost 是一款强大的梯度提升框架&#xff0c;特别适合处理带有类别特征的数据。本篇博客以脱敏后的保险数据集为例&#x…

HTML Input 文件上传功能全解析:从基础到优化

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

Unity在运行状态下,当物体Mesh网格发生变化时,如何让MeshCollider碰撞体也随之实时同步变化?

旧版源代码地址&#xff1a;https://download.csdn.net/download/qq_41603955/90087225?spm1001.2014.3001.5501 旧版效果展示&#xff1a; 新版加上MeshCollider后的效果&#xff1a; 注意&#xff1a;在Unity中&#xff0c;当你动态地更改物体的Mesh时&#xff0c;通常期望…

conda create -n name python=x.x 执行失败问题解决方法

今天想在anaconda环境下创建一个指定python版本为3.9的虚拟环境&#xff0c;执行命令 conda create -n DeepLearning python3.9 但是系统竟然报错 看报错信息是在镜像源里找不到下载包&#xff0c;于是对镜像源文件处理 首先删除之前的镜像通道 conda config --remove-key …

第一个 JSP 程序

一个简单的 JSP 程序&#xff1a; 使用 IDEA 开发工具新建一个 maven 项目&#xff0c;具体操作如图所示&#xff1a; 配置 Tomcat 服务器 项目结构如下图所示&#xff1a; 3. 修改 index.jsp 页面的代码&#xff1a; <% page language"java" contentType&q…