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

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

news 2026/2/9 20:26:32
  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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/2/8 20:42:56

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2026/1/23 12:42:28

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2026/2/2 22:06:13

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50

STM32---外部32.768K晶振（LSE）无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

编程新知 2026/2/7 10:55:43