uniapp地图导航及后台百度地图回显(v2/v3版本)
百度地图申请地址：控制台 | 百度地图开放平台
效果：
1.后台
1.1申请百度地图APi
1.2 引入百度地图
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=自己百度生气apikey"></script>1.3 v2组件
<template><div><!-- 地图容器 --><div id="map-container" class="map-container"></div><!-- 结果展示区域 --><div class="result">搜索：<el-input v-model="keyMap" placeholder="请输入地址" size="small" clearable></el-input><el-button type="primary" size="small" @click="searchAddress">搜索</el-button></div></div>
</template><script>
export default {data() {return {keyMap: '',map: null,marker: null,geoc: null};},methods: {updatePositionAndAddress(point) {this.$emit('update:marker-position', {lat: point.lat,lng: point.lng});this.geoc.getLocation(point, (rs) => {if (rs) {this.$emit('update:address', rs.address);}});},handleMapClick(e) {if (this.marker) {this.map.removeOverlay(this.marker);}this.marker = new BMap.Marker(e.point);this.map.addOverlay(this.marker);this.updatePositionAndAddress(e.point);},searchAddress() {if (!this.keyMap) return;const local = new BMap.LocalSearch(this.map, {renderOptions: { map: this.map },onSearchComplete: (results) => {if (results.getNumPois()) {const firstResult = results.getPoi(0);const point = firstResult.point;if (this.marker) {this.map.removeOverlay(this.marker);}this.marker = new BMap.Marker(point);this.map.addOverlay(this.marker);this.map.centerAndZoom(point, 15);this.updatePositionAndAddress(point);}}});local.search(this.keyMap);}},mounted() {if (!window.BMap) {console.error('百度地图 API 未正确加载，请检查 API 密钥和脚本链接');return;}this.map = new BMap.Map('map-container');this.map.centerAndZoom(new BMap.Point(102.755, 25.134), 13);this.map.enableScrollWheelZoom();this.geoc = new BMap.Geocoder();this.map.addEventListener('click', this.handleMapClick);}
};
</script><style scoped>
.map-container {width: 600px;height: 500px;
}.result {margin-top: 10px;font-size: 14px;
}
</style>
1.4 v3组件
<template><div><!-- 地图容器 --><div id="map-container" class="map-container"></div><!-- 结果展示区域 --><div class="result">搜索：<el-input v-model="keyMap" placeholder="请输入地址" size="small" clearable></el-input><el-button type="primary" size="small" @click="searchAddress">搜索</el-button></div></div>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue'const emit = defineEmits(['update:marker-position', 'update:address'])// 定义响应式数据
const keyMap = ref('')
let map: any = null
let marker: any = null
let geoc: any = null// 更新标记位置和地址的函数
const updatePositionAndAddress = (point: any) => {// 发送位置更新事件emit('update:marker-position', {lat: point.lat,lng: point.lng})// 反向地理编码获取详细地址geoc.getLocation(point, (rs: any) => {if (rs) {emit('update:address', rs.address)}})
}// 处理地图点击事件
const handleMapClick = (e: any) => {// 如果已有标注，则先移除if (marker) {map.removeOverlay(marker)}// 创建新的标注marker = new BMap.Marker(e.point)map.addOverlay(marker)// 更新位置和地址updatePositionAndAddress(e.point)
}// 搜索地址
const searchAddress = () => {if (!keyMap.value) return// 创建地址搜索实例const local = new BMap.LocalSearch(map, {renderOptions: { map: map },onSearchComplete: (results: any) => {if (results.getNumPois()) {const firstResult = results.getPoi(0)const point = firstResult.point// 移除旧标记if (marker) {map.removeOverlay(marker)}// 添加新标记marker = new BMap.Marker(point)map.addOverlay(marker)map.centerAndZoom(point, 15)// 更新位置和地址updatePositionAndAddress(point)}}})local.search(keyMap.value)
}// 初始化地图
onMounted(() => {const BMap = window.BMapif (!BMap) {console.error('百度地图 API 未正确加载，请检查 API 密钥和脚本链接')return}// 初始化地图map = new BMap.Map('map-container')map.centerAndZoom(new BMap.Point(102.755, 25.134), 13)map.enableScrollWheelZoom()// 初始化地理编码器geoc = new BMap.Geocoder()// 添加点击事件监听map.addEventListener('click', handleMapClick)
})
</script><style scoped>
/* 样式部分 */
.map-container {width:600px;height: 500px;
}.result {margin-top: 10px;font-size: 14px;
}
</style>1.5 使用
#需要完成源码加vx a2411286970a<BaiduMap ref="mapRef" @update:marker-position="handleMarkerPositionUpdate"@update:address="handleAddressUpdate"></BaiduMap>#需要完成源码加vx a2411286970a
handleMarkerPositionUpdate(position){console.log(position);this.ruleForm.latitude=position.latthis.ruleForm.longitude=position.lng},2.uinapp
我们在后台进行位置获取后，在前台微信小程序及可进回显导航即可！
// 导航功能onNavigateTap() {// 检查是否有地址信息if (!this.detail.jingdiandizhi) {this.$utils.msg('暂无地址信息');return;}let _this = this;uni.authorize({scope: 'scope.userLocation',success: () => {// 用户已授权，获取当前位置uni.getLocation({type: 'gcj02', // 返回可以用于uni.openLocation的经纬度success: (res) => {const latitude = res.latitude;const longitude = res.longitude;// 使用当前位置打开地图uni.openLocation({latitude: parseFloat(this.detail.latitude),longitude:parseFloat(this.detail.longitude),name: this.detail.jingdianmingcheng,address: this.detail.jingdiandizhi,scale: 18,success: function() {console.log('成功打开位置');},fail: function(err) {console.error('打开位置失败', err);}});},fail: function(err) {console.error('获取位置失败', err);}});},fail: () => {// 用户未授权uni.showModal({title: '提示',content: '需要获取您的位置权限，请前往设置开启。',success: (res) => {if (res.confirm) {uni.openSetting();}}});}});// // 打开地图导航// uni.openLocation({// latitude: 0, // 这里需要替换为实际的经纬度// longitude: 0, // 这里需要替换为实际的经纬度// name: this.detail.jingdianmingcheng,// address: this.detail.jingdiandizhi,// success: function() {// console.log('导航成功');// },// fail: function(err) {// console.log('导航失败', err);// // 如果没有经纬度，可以使用复制地址的方式// uni.setClipboardData({// data: this.detail.jingdiandizhi,// success: function() {// uni.showToast({// title: '地址已复制，请打开地图APP进行导航',// icon: 'none'// });// }// });// }// });},
相关文章：
)
uniapp地图导航及后台百度地图回显(v2/v3版本)
百度地图申请地址：控制台 | 百度地图开放平台 效果： 1.后台 1.1申请百度地图APi 1.2 引入百度地图 <script type"text/javascript" src"//api.map.baidu.com/api?v3.0&ak自己百度生气apikey"></script> 1.3 v2组…...
多layout 布局适配
安卓多布局文件适配方案操作流程 以下为通过多套布局文件适配不同屏幕尺寸/密度的详细步骤，结合主流适配策略及最佳实践总结： 一、创建多套布局资源目录 按屏幕尺寸划分 在 res 目录下创建以下文件夹（根据设备特性自动匹配ÿ…...
马斯克 AI 超算
超算建设情况：马斯克旗下人工智能初创公司 xAI 正在田纳西州孟菲斯市建造世界上最大的超级计算机2。自 2024 年 6 月首次宣布这笔工程以来，xAI 已向当地规划和发展机构提交了 14 份施工许可申请，合计代表了 4.059 亿美元的预计项目成本2。该超…...
大模型学习四：DeepSeek Janus-Pro 多模态理解和生成模型 本地部署指南（折腾版）
一、说明简介 DeepSeek Janus-Pro是一款先进的多模态理解和生成模型，旨在实现高质量的文本-图像生成与多模态理解。它是由DeepSeek团队研发的，是之前Janus模型的升级版，能够同时处理文本和图像，即可以理解图片内容，…...
《AI大模型应知应会100篇》第3篇：大模型的能力边界：它能做什么，不能做什么
第3篇：大模型的能力边界：它能做什么，不能做什么 摘要 在人工智能飞速发展的今天，大语言模型（LLM）已经成为许多领域的核心技术。然而，尽管它们展现出了惊人的能力，但也有明显的局限性…...
MySQL 面试知识点详解（索引、存储引擎、事务与隔离级别、MVCC、锁机制、优化）
一、索引基础概念 1 索引是什么？ 定义：索引是帮助MySQL高效获取数据的有序数据结构，类似书籍的目录。核心作用：减少磁盘I/O次数，提升查询速度（以空间换时间）。 2 索引的优缺点 优点缺点加速…...
JS API
const变量优先 即对象、数组等引用类型数据可以用const声明 API作用和分类 DOM (ducument object model) 操作网页内容即HTML标签的 树状模型 HTML中标签 JS中对象 最大对象 document 其次大 html 以此类推 获取DOM对象 CSS 中 使用选择器 JS 中 选多个 时代的眼泪 修…...
hackmyvm-Principle
近况: 很难受、 也很累。 但是庆幸靶机很好 正值清明时节 清明时节雨纷纷 🌧️，路上行人欲断魂 😢。 靶机地址 信息收集 主机发现 端口扫描 80端口仅仅是一个nginx 的欢迎界面而已 robots.txt的内容 hi.html的内容 hackme不存在 investigat…...
小刚说C语言刷题——第14讲 逻辑运算符
当我们需要将一个表达式取反，或者要判断两个表达式组成的大的表达式的结果时，要用到逻辑运算符。 1.逻辑运算符的分类 (1)逻辑非(!) ！a，当a为真时，！a为假。当a为假时，！a为真。 例…...
池化技术的深度解析与实践指南【大模型总结】
池化技术的深度解析与实践指南 池化技术作为计算机系统中的核心优化手段，通过资源复用和预分配机制显著提升系统性能。本文将从原理、实现到最佳实践，全方位剖析池化技术的核心要点，并结合实际案例说明其应用场景与调优策略。 一、池化技术的…...
，源码可白嫖!)
基于Java的区域化智慧养老系统(源码+lw+部署文档+讲解)，源码可白嫖!
摘 要 时代在飞速进步，每个行业都在努力发展现在先进技术，通过这些先进的技术来提高自己的水平和优势，区域化智慧养老系统当然不能排除在外。区域化智慧养老系统是在实际应用和软件工程的开发原理之上，运用Java语言、JSP技术以及…...
2025年3月 Scratch 图形化（一级）真题解析 中国电子学会全国青少年软件编程等级考试
2025.03 Scratch图形化编程等级考试一级真题试卷 一、选择题 第 1 题 气球初始位置如下图所示，scratch运行下列程序，气球会朝哪个方向移动？（ ） A.水平向右 B.垂直向下 C.水平向左 D.垂直向上 答案：…...
Docker 命令简写配置
alias dpsdocker ps --format "table {{.ID}}\t{{.Image}}\t{{.Ports}}\t{{.Status}}\t{{.Names}}" 配置好后，需要输入： source ~/.bashrc 后生效...
linux signal up/down/down_interruptiable\down_uninterruptiable使用
在Linux内核中，down, down_interruptible, down_killable, 和 up 是用于操作信号量（semap hores）的函数，它们用于进程同步和互斥。以下是对这些函数的简要说明。 1，down(&sem): 这个函数用于获取信号量。如果信号…...
【嵌入式-stm32电位器控制以及旋转编码器控制LED亮暗】
嵌入式-stm32电位器控制LED亮暗 任务1代码1Key.cKey.hTimer.cTimer.hPWM.cPWM.hmain.c 实验现象1任务2代码2Key.cKey.hmain.c 实验现象2问题与解决总结 源码框架取自江协科技，在此基础上做扩展开发。 任务1 本文主要介绍利用stm32f103C8T6实现电位器控制PWM的占空比…...
Mysql 中 ACID 背后的原理
在 MySQL 中，ACID 是事务处理的核心原则，用于保证数据库在执行事务时的可靠性、数据一致性和稳定性。ACID 是四个关键特性的首字母缩写，分别是：Atomicity（原子性）、Consistency（一致性ÿ…...
【算法】简单数论
模运算 a m o d b a − ⌊ a / b ⌋ b a\ mod \ b a - \lfloor a / b \rfloor \times b a mod ba−⌊a/b⌋b n m o d p n \ mod\ p n mod p得到的结果的正负至于被除数 n n n有关 模运算的性质： ( a b ) m o d m ( ( a m o d m ) ( b m o d m ) ) m o d m …...
mybatis慢sql无所遁形
痛点问题： 扫描项目的慢sql 并提出优化建议 开源项目地址：gitee：mybatis-sql-optimizer-spring-boot-starter: 这个starter可以帮助开发者在开发阶段发现SQL性能问题，并提供优化建议，从而提高应用程序的数据库访问效…...
MCP有哪些比较好的资源？
MCP（Model Context Protocol）是一种由Anthropic公司推出的开放协议，旨在为AI模型与开发环境之间提供统一的上下文交互接口。目前，围绕MCP协议的资源非常丰富，以下是一些比较好的MCP资源推荐： Smithery Smit…...
Nginx功能及应用全解：从负载均衡到反向代理的全面剖析
Nginx作为一款开源的高性能HTTP服务器和反向代理服务器，凭借其高效的资源利用率和灵活的配置方式，已成为互联网领域中最受欢迎的Web服务器之一。无论是作为HTTP服务器、负载均衡器，还是作为反向代理和缓存服务器，Nginx的多种功能广…...
FreeRTOS/任务创建和删除的API函数
任务的创建和删除本质就是调用FreeRTOS的API函数 API函数描述xTaskCreate()动态方式创建任务xTaskCreateStatic()静态方式创建任务vTaskDelete()删除任务 动态创建任务 任务的任务控制块以及任务的占空间所需的内存，均由FreeRTOS从FreeRTOS管理的堆中分配 静态创建…...
【jvm】GC评估指标
目录 1. 说明2. 吞吐量（Throughput）3. 暂停时间（Pause Time）4. 内存占用（Footprint）5. 频率（Frequency）6. 对象晋升率（Promotion Rate）7. 内存分配速率&#…...
数据集（Dataset）和数据加载器（DataLoader）-pytroch学习3
pytorch网站学习 处理数据样本的代码往往会变得很乱、难以维护；理想情况下，我们希望把数据部分的代码和模型训练部分分开写，这样更容易阅读、也更好维护。 简单说：数据和模型最好“分工明确”，不要写在一起。 PyTor…...
影响RTOS实时性的因素有哪些？
目录 1、任务调度延迟 2、中断处理延迟 3、系统负载 4、任务优先级反转 5、时钟精度 6、内存管理 影响RTOS实时性的因素主要包括任务调度延迟、中断处理延迟、系统负载、任务优先级反转、时钟精度、内存管理等。 1、任务调度延迟 任务调度器是RTOS的核心，当…...
二叉树 递归
本篇基于b站灵茶山艾府的课上例题与课后作业。 104. 二叉树的最大深度 给定一个二叉树 root ，返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1： 输入：root [3,9,20,null,null,15,7] 输出&…...
ZLMediaKit 源码分析——[5] ZLToolKit 中EventPoller之延时任务处理
系列文章目录 第一篇 基于SRS 的 WebRTC 环境搭建 第二篇 基于SRS 实现RTSP接入与WebRTC播放 第三篇 centos下基于ZLMediaKit 的WebRTC 环境搭建 第四篇 WebRTC学习一：获取音频和视频设备 第五篇 WebRTC学习二：WebRTC音视频数据采集 第六篇 WebRTC学习三…...
【51单片机】2-6【I/O口】电动车简易防盗报警器实现
1.硬件 51最小系统继电器模块震动传感器模块433M无线收发模块 2.软件 #include "reg52.h" #include<intrins.h> #define J_ON 1 #define J_OFF 0sbit switcher P1^0;//继电器 sbit D0_ON P1^1;//433M无线收发模块 sbit D1_OFF P1^2; sbit vibrate …...
)
windows下载安装远程桌面工具RealVNC-Server教程(RealVNC_E4_6_1版带注册码)
文章目录 前言一、下载安装包二、安装步骤三、使用VNC-Viewer客户端远程连接，输入ip地址，密码完成连接 前言 在现代工作和生活中，远程控制软件为我们带来了极大的便利。RealVNC - Server 是一款功能强大的远程控制服务器软件，通过…...
C语言的操作系统
C语言的操作系统 引言 操作系统是一种系统软件，它管理计算机硬件和软件资源，并为计算机程序提供公共服务。在现代计算机科学中，操作系统是不可或缺的组成部分，而C语言则是实现高效操作系统的主要编程语言之一。本文将探讨C语言在…...
selectdb修改表副本
如果想修改doris（也就是selectdb数据库）表的副本数需要首先确定是否分区表，当前没有数据字典得知哪个表是分区的，只能先show partitions看结果 首先，副本数不应该大于be节点数 其次，修改期间最好不要跑业务…...
leetcode数组-有序数组的平方
题目 题目链接：https://leetcode.cn/problems/squares-of-a-sorted-array/ 给你一个按 非递减顺序 排序的整数数组 nums，返回 每个数字的平方 组成的新数组，要求也按 非递减顺序 排序。 输入：nums [-4,-1,0,3,10] 输出ÿ…...
【python中级】关于Cython 的源代码pyx的说明
【python中级】关于Cython 的源代码pyx的说明 1.背景2.编译3.语法1.背景 Cython 是一个编程语言和工具链，用于将 Python 代码（或类 Python 的代码）编译成 C 语言，再进一步生成高性能的 Python 扩展模块（.so 或 .pyd 文件）。 在 Python 中，.pyx 文件是 Cython 的源代码文…...
开放最短路径优先 - OSPF【LSA详细】
目录 LSA的头部结构 LSA类型 LSA数据包 LSA的主要作用是传递路由信息。 LSA的头部结构 共占20个字节，不同类型的LSA头部字段部分都是相同的。 链路状态老化时间(Link-State Age) 2个字节。指示该条LSA的老化时间，即它存在了多长时间，单位…...
PyTorch：解锁AI新时代的钥匙
揭开PyTorch面纱 对于许多刚开始接触人工智能领域的朋友来说，PyTorch这个名字或许既熟悉又陌生。熟悉在于它频繁出现在各类技术论坛和新闻报道中；而陌生则源于对这样一个强大工具背后运作机制的好奇。简单来说，PyTorch是一个开源库ÿ…...
欧几里得算法求最大公约数、最小公倍数
这段代码就是不断用较小数和余数来更新 a 和 b，直到余数变为 0，最后返回的 a 就是最大公约数。 #include <iostream> using namespace std;//最大公约数 int gcd(int a, int b){//这个循环表示只要 b 不是 0，就继续进行。//因为当 b …...
QEMU源码全解析 —— 块设备虚拟化（14）
接前一篇文章：QEMU源码全解析 —— 块设备虚拟化（13） 本文内容参考： 《趣谈Linux操作系统》 —— 刘超，极客时间 《QEMU/KVM源码解析与应用》 —— 李强，机械工业出版社 特此致谢！ 上一回开始解析VirtioDeviceClass的realize函数virtio_blk_device_realize()，再来回…...
深入理解AOP：面向切面编程的核心概念与实战应用
🌟 前言 欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍 &#x…...
3500 阶乘求和
3500 阶乘求和 ⭐️难度：中等 🌟考点：2023、思维、省赛 📖 📚 import java.util.Scanner;public class Main {public static void main(String[] args) {long sum 0;for(int i1;i<50;i) { // 之后取模都相等su…...
正则入门到精通
一、正则表达式入门 正则表达式本质上是一串字符序列，用于定义一个文本模式。通过这个模式，我们可以指定要匹配的文本特征。例如，如果你想匹配一个以 “abc” 开头的字符串，正则表达式可以写作 “^abc”，其中 …...
Mysql 行级锁在什么样的情况下会升级为表级锁？
在 MySQL 中，行级锁通常由 InnoDB 存储引擎使用，因为它支持高并发和细粒度的锁定。通常情况下，InnoDB 在执行诸如 UPDATE、DELETE 或 SELECT FOR UPDATE 等操作时，会为被修改的数据行加锁（行级锁）。但是&am…...
docker部署kkfileview
拉取 KKFileView 镜像 docker pull keking/kkfileview或指定版本 docker pull keking/kkfileview:4.1.0运行 KKFileView 容器 docker run -d \--name kkfileview \-p 8012:8012 \--restart always \keking/kkfileview-d：后台运行 -p 8012:8012：将容器…...
优选算法的妙思之流：分治——快排专题
专栏：算法的魔法世界 个人主页：手握风云 目录 一、快速排序 二、例题讲解 2.1. 颜色分类 2.2. 排序数组 2.3. 数组中的第K个最大元素 2.4. 库存管理 III 一、快速排序 分治，简单理解为“分而治之”，将一个大问题划分为若干个…...
蓝桥杯嵌入式第15届真题-个人理解+解析
个人吐槽 #因为最近蓝桥杯快要开始了，我舍不得米白费了，所以就认真刷刷模拟题，但是我感觉真题会更好，所以就看了一下上届的真题。不过它是真的长，我看着就头晕，但是还是把几个模块认真分析了一下就还是很容…...
数据库系统概述 | 第二章课后习题答案
本文为数据库系统概论（第五版）【高等教育出版社】部分课后答案 如有错误，望指正 👻 习题 👻 答案...
深入解析CPU主要参数：选购与性能评估指南
引言 中央处理器（CPU）作为计算机的"大脑"，其性能直接决定了整机的运算能力和响应速度。无论是组装新电脑、升级旧系统还是选购笔记本电脑，理解CPU的关键参数都至关重要。本文将从技术角度全面解析CPU的各项主要参数&am…...
Lettuce与Springboot集成使用
一、Lettuce核心优势与Spring Boot集成背景 Lettuce特性 基于Netty的非阻塞I/O模型，支持同步/异步/响应式编程线程安全：共享单连接实现多线程并发操作，性能衰减低原生支持Redis集群、哨兵、主从架构，自动重连机制保障高可用Spring…...
【Kafka基础】ZooKeeper在Kafka中的核心作用：分布式系统中枢神经系统
在分布式系统的世界里，协调和管理多个节点间的状态是一项复杂而关键的任务。Apache Kafka作为一款高性能的分布式消息系统，其设计哲学是"专为单一目的而优化"——即高效处理消息流。为了实现这一目标，Kafka选择将集群协调管理的重任…...
专业的情商测评工具：EQ-i在线测评系统
专业的情商测评工具：EQ-i在线测评系统 基于巴昂情商量表的专业情商评估工具，帮助您更好地了解自己的情商水平。 什么是EQ-i？ EQ-i（Emotional Quotient Inventory）是由Reuven Bar-On开发的情商量表，是国际上…...
Ubuntu安装Podman教程
1、先修改apt源为阿里源加速 备份原文件： sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup 修改源配置： vim sources.list删除里面全部内容后，粘贴阿里源： deb http://mirrors.aliyun.com/ubuntu/ focal main re…...
7.训练篇5-毕设
使用23w张数据集-vit-打算30轮-内存崩了-改为batch_size 8 我准备用23w张数据集，太大了，这个用不了，所以 是否保留 .stack() 加载所有图片？情况建议✅ 小数据集（<2w张，图像小）想加快速度可…...