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

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

news 2026/3/28 3:31:04
  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)}})}}

展示效果如下：

在这里插入图片描述

相关文章：

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

首先在百度地图开发者平台注册微信小程序开发密钥下载百度地图SDK-bmap-wx.min.js,下载地址在项目入口index.html页面进行引入页面中进行调用&#xff0c;代码示例如下<map id"map" longitude"108.95" latitude"34.34" scale"3" :m…...

编程日记 2024/12/9 22:58:34

ubuntu22.04 使用可以用的镜像源获取你要的镜像

默认的是不行的 不管pull啥镜像 仍然会出现这个错误 Error response form daemon:Get "https://registry-1.docker.io/v2": net/http: request canceled while waiting for connection (Client.Timeout exceeded while await) 操作方法是 如果在目录没有/etc/docker…...

编程日记 2024/12/9 22:57:33

Flume——sink连接hdfs的参数配置（属性参数+时间参数）

这可不是目录 配置文件官网说明属性参数时间参数 配置文件官网说明 可以参考官网的说明 属性参数 属性名称默认值说明channel-type-组件类型名称&#xff0c;必须是hdfshdfs.path-HDFS路径&#xff0c;例如&#xff1a;hdfs://mycluster/flume/mydatahdfs.filePrefixFlumeDa…...

编程日记 2024/12/9 22:54:30

python+docker实现分布式存储的demo

test.py代码 #test.py from flask import Flask, request, jsonify import requests import sys import threadingapp Flask(__name__)# 存储数据 data_store {}# 节点列表&#xff0c;通过环境变量传入 nodes [] current_node Noneapp.route(/set, methods[POST]) def …...

编程日记 2024/12/9 22:51:26

go-blueprint create exit status 1

1. 异常信息 2024/12/06 10:59:19 Could not initialize go.mod in new project exit status 1 2024/12/06 10:59:19 Problem creating files for project. exit status 1 Error: exit status 12. 排查思路 手动进行go mod init查看手动的报错解决报错 3. 解决问题 发现是GO11…...

编程日记 2024/12/9 22:49:23

如何更改Git用户名 - 本地与全局设置指南

在开发过程中&#xff0c;当使用Git作为版本控制系统时&#xff0c;可能会遇到需要更改用户名的情况&#xff0c;适时更新Git配置是保持项目管理效率的重要环节。更改Git用户名可以帮助确保您的提交反映了当前的用户身份&#xff0c;这对于项目的协作和历史记录跟踪至关重要。 …...

编程日记 2024/12/9 22:46:19

Node.js JWT认证教程

Node.js JWT认证教程 1. 项目介绍 JSON Web Token (JWT) 是一种安全的跨域身份验证解决方案&#xff0c;在现代Web应用中广泛使用。本教程将详细讲解如何在Node.js中实现JWT认证。 2. 项目准备 2.1 初始化项目 # 创建项目目录 mkdir nodejs-jwt-auth cd nodejs-jwt-auth# …...

编程日记 2024/12/9 22:42:13

【青牛科技】应用于音频信号处理系统的D258 是由两个独立的高增益运算放大器组成

概述&#xff1a; D258是由两个独立的高增益运算放大器组成。可以是单电源工作&#xff0c;也可以是双电源工作,电源的电流消耗与电源电压大小无关。应用范围包括变频放大器、DC增益部件和所有常规运算放大电路。 主要特点&#xff1a; ● 可单电源或双电源 工作 ● 在一个封…...

编程日记 2024/12/9 22:40:11

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

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

编程日记 2024/12/9 22:37:07

小程序 —— Day1

组件 — view和scroll-view view 类似于HTML中的div&#xff0c;是一个块级元素 案例&#xff1a;通过view组件实现页面的基础布局 scroll-view 可滚动的视图区域&#xff0c;用来实现滚动列表效果 案例&#xff1a;实现纵向滚动效果 scroll-x属性&#xff1a;允许横向滚动…...

编程日记 2024/12/9 22:33:03

4.5 TCP 报文段的首部格式

欢迎大家订阅【计算机网络】学习专栏&#xff0c;开启你的计算机网络学习之旅&#xff01; 文章目录 前言1 TCP 报文段的基本结构2 固定部分2.1 源端口与目的端口2.2 序号2.3 确认号2.4 数据偏移2.5 保留字段2.6 控制位2.7 窗口2.8 检验和2.9 紧急指针 3 可变部分3.1 选项3.2 填…...

编程日记 2024/12/9 22:31:00

SQL 获取今天的当月开始结束范围:

使用 GETDATE() 结合 DATEADD() 和 DATEDIFF() 函数来获取当前月的开始和结束时间范围。以下是实现当前月时间范围查询的 SQL&#xff1a; FDATE > DATEADD(MONTH, DATEDIFF(MONTH, 0, GETDATE()), 0) FDATE < DATEADD(MONTH, DATEDIFF(MONTH, 0, GETDATE()) 1, 0) …...

编程日记 2024/12/9 22:25:54

Qt复习学习

https://www.bilibili.com/video/BV1Jp4y167R9/?spm_id_from333.999.0.0&vd_sourceb3723521e243814388688d813c9d475f https://subingwen.cn/qt/qt-primer/#1-4-Qt%E6%A1%88%E4%BE%8B https://subingwen.cn/qt/ https://download.qt.io/archive/qt/1.1Qt的特点 1.2QT中的…...

编程日记 2024/12/9 22:24:51

Leetcode经典题5--轮转数组

题目描述 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 输入输出示例 &#xff1a; 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右…...

编程日记 2024/12/9 22:23:48

C++的一些经典算法

以下是C的一些经典算法&#xff1a; 一、排序算法 冒泡排序&#xff08;Bubble Sort&#xff09; 原理&#xff1a; 它重复地走访过要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换…...

编程日记 2024/12/9 22:22:47

Windows环境中Python脚本开机自启动及其监控自启动

1 开机自启动 Windows 10/Windows Server 201X具有一个名为“启动”的已知文件夹&#xff0c;系统每次启动开始自动运行应用程序、快捷方式和脚本时都会检查该文件夹&#xff0c;而无需额外配置。 要在Windows启动时运行脚本&#xff0c;先使用WindowsR快捷键打开“运行”对话…...

编程日记 2024/12/9 22:21:46

XML 语言随笔

XML的含义 XML&#xff08;eXtensible Markup Language&#xff0c;可扩展标记语言&#xff09;是一种用于存储和传输数据的标记语言。XML与HTML&#xff08;HyperText Markup Language&#xff0c;超文本标记语言&#xff09;类似&#xff0c;但XML的设计目的是描述数据&…...

编程日记 2024/12/9 22:20:45

E卷-分割数组的最大差值

分割数组的最大差值 问题描述 给定一个由若干整数组成的数组 n u m s nums nums，可以在数组内的任意位置进行分割，将该数组分割成两个非空子数组（即左数组和右数组）。分别对子数组求和得到两个值，然后计算这两个值的差值。请输出所有分割方案中，差值的最大值。 输入格…...

编程日记 2024/12/9 22:18:42

基于SpringBoot校园台球厅人员与设备管理系统设计与实现

1.1课题背景与意义 在Internet高速发展的今天&#xff0c;计算机的应用几乎完全覆盖我们生活的各个领域&#xff0c;互联网在经济&#xff0c;生活等方面有着举足轻重的地位&#xff0c;成为人们资源共享&#xff0c;信息快速传递的重要渠道。在中国&#xff0c;网上管理的兴起…...

编程日记 2024/12/9 22:17:41

异步FIFO的实现

异步FIFO是verilog中常见的设计&#xff0c;通常用于不同时钟域下的数据同步。 在实现 FIFO 时&#xff0c;无论是同步 FIFO 还是异步 FIFO &#xff0c;通常会通过双口 RAM &#xff08; Dual Port RAM &#xff09;并添加一些必要的逻辑来实现。双口 RAM的设计如下&#xff1…...

编程日记 2024/12/9 22:16:40

28：L构建AI Agent安全：蓝队的智能代理防御

作者&#xff1a; HOS(安全风信子) 日期&#xff1a; 2026-03-19 主要来源平台&#xff1a; GitHub 摘要&#xff1a; AI Agent的发展为安全防御带来了新的可能性&#xff0c;但也带来了新的安全挑战。基拉等对手可能利用AI Agent进行攻击。L深入研究AI Agent安全技术&#xff…...

编程新知 2026/3/28 2:55:11

百川2-13B-4bits量化版精度测试：OpenClaw自动化任务准确率对比

百川2-13B-4bits量化版精度测试&#xff1a;OpenClaw自动化任务准确率对比 1. 测试背景与实验设计 上周在部署OpenClaw自动化工作流时&#xff0c;我遇到了一个现实问题&#xff1a;本地显卡只有12GB显存&#xff0c;跑不动原版13B模型。于是尝试了百川2-13B的4bits量化版本&…...

编程新知 2026/3/28 1:15:39

AD21实战：3种方法搞定Keepout和机械层互转，最后一种能救急

AD21实战&#xff1a;3种高效解决Keepout与机械层互转难题的方法 在PCB设计过程中&#xff0c;Keepout层和机械层的正确使用与转换是确保设计准确性的关键环节。许多工程师都遇到过这样的困境&#xff1a;当设计文件中包含复杂图形元素时&#xff0c;简单的层切换或属性批量修…...

编程新知 2026/3/27 22:54:25

无需编程！用OFA模型快速搭建图文匹配工具：上传即测，结果秒出

无需编程&#xff01;用OFA模型快速搭建图文匹配工具&#xff1a;上传即测&#xff0c;结果秒出 1. 图文匹配的痛点与解决方案 你有没有遇到过这样的困扰&#xff1f;在网上购物时&#xff0c;商品图片和描述对不上&#xff1b;浏览社交媒体时&#xff0c;配图与文字内容完全…...

编程新知 2026/3/27 22:34:20

Milvus向量数据库Docker安装避坑指南：从配置到可视化工具Attu的完整流程

Milvus向量数据库Docker安装避坑指南&#xff1a;从配置到可视化工具Attu的完整流程 当开发者第一次接触向量数据库时&#xff0c;往往会遇到各种意想不到的"坑"。作为一款开源的向量数据库&#xff0c;Milvus因其高性能和易用性而广受欢迎&#xff0c;但在Docker环境…...

编程新知 2026/3/27 22:08:04

别再瞎装了！用NVIDIA-SMI一键查CUDA版本，保姆级PyTorch 2.6.0安装避坑指南

深度学习环境搭建实战&#xff1a;从CUDA版本诊断到PyTorch 2.6.0完美安装 刚接触深度学习的新手最常遇到的"入门杀"问题&#xff0c;往往不是模型调参或代码编写&#xff0c;而是环境搭建这个看似简单的环节。我见过太多人在安装PyTorch时直接复制粘贴网上的pip命令…...

编程新知 2026/3/27 21:45:58

LazyLLM架构设计揭秘：低代码如何支撑复杂多Agent系统

LazyLLM架构设计揭秘&#xff1a;低代码如何支撑复杂多Agent系统 【免费下载链接】LazyLLM 项目地址: https://gitcode.com/gh_mirrors/la/LazyLLM 在当今AI应用开发领域&#xff0c;构建复杂的多Agent系统往往需要大量的工程投入和专业知识。然而&#xff0c;LazyLLM框…...

编程新知 2026/3/27 21:19:48

告别龟速滚屏！Ubuntu 20.04下用imwheel调鼠标滚轮速度（附开机自启保姆级教程）

Ubuntu 20.04终极鼠标滚轮优化指南&#xff1a;从基础配置到系统级调优 每次在Ubuntu上浏览长网页或翻阅代码时&#xff0c;那个慢如蜗牛的滚动速度是否让你抓狂&#xff1f;作为从Windows或macOS迁移过来的用户&#xff0c;这种体验落差尤为明显。鼠标滚轮响应迟缓不仅影响工作…...

编程新知 2026/3/27 21:17:47

OpenClaw环境隔离方案：ollama-QwQ-32B镜像与本地Python虚拟环境整合

OpenClaw环境隔离方案&#xff1a;ollama-QwQ-32B镜像与本地Python虚拟环境整合 1. 为什么需要环境隔离 上周我在尝试将OpenClaw接入本地部署的ollama-QwQ-32B模型时&#xff0c;遇到了一个棘手的问题&#xff1a;我的开发环境突然崩溃了。事后排查发现&#xff0c;是OpenCla…...

编程新知 2026/3/27 20:05:06

VuePress/Hexo博客作者必看：VSCode Paste Image插件路径配置避坑指南

VuePress/Hexo博客作者必看&#xff1a;VSCode Paste Image插件路径配置避坑指南 当你沉浸在VSCode中撰写技术博客时&#xff0c;是否遇到过这样的场景&#xff1a;本地预览时图片显示完美&#xff0c;但一旦部署到线上&#xff0c;所有图片都变成了令人沮丧的404错误&#xff…...

编程新知 2026/3/27 19:55:04