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

Vue 百度地图搜索框+点击地图获取坐标

news 来源：原创 2025/7/6 12:56:09

本文通过vue+ele+百度地图，实现点击地图获取坐标，或者搜索框智能联想下拉框，点击获取坐标及地图位置标点。

百度地图通过public文件夹下index.html,script方式引入全局代码如下：

<template><div><div id="l-map" class="baiduMap"></div><el-form ref="form" :model="formData"><el-form-item label="位置信息" prop="unitName"><el-input v-model="formData.positionInfo" placeholder="请输入详细地址" id="suggestId" clearable></el-input></el-form-item><el-form-item label="经度" prop="lng"><el-input v-model="formData.lng" placeholder="请选择经度" :disabled="true"></el-input></el-form-item><el-form-item label="纬度" prop="lat"><el-input v-model="formData.lat" placeholder="请选择纬度" :disabled="true"></el-input></el-form-item></el-form></div>
</template><script>
export default {data() {return {formData: {},map: null,myGeo: null,ac: null,};},components: {},props: {center: {type: Array,default: () => [108.9470400, 34.2594300]},},mounted() {this.initMap();},methods: {initMap() {this.map = new BMap.Map("l-map", { enableMapClick: false });this.map.centerAndZoom(new BMap.Point(this.center[0], this.center[1]), 11);this.map.enableScrollWheelZoom(true);this.myGeo = new BMap.Geocoder();this.initAutocomplete();this.map.addEventListener('click', this.handleMapClick);},initAutocomplete() {this.ac = new BMap.Autocomplete({ input: "suggestId", location: this.map });this.ac.addEventListener("onconfirm", this.handleConfirm);},handleConfirm(e) {// 鼠标点击下拉列表后的事件let _value = e.item.value;let address = _value.province + _value.city + _value.district + _value.street + _value.business;this.setPlace(address);},setPlace(address) {this.map.clearOverlays(); // 清除地图上所有覆盖物const local = new BMap.LocalSearch(this.map, {onSearchComplete: () => {const point = local.getResults().getPoi(0).point; // 获取第一个智能搜索的结果const value = {address,position: [point.lng, point.lat],};this.$set(this.formData, 'lng', point.lng);this.$set(this.formData, 'lat', point.lat);this.$emit('getValue', value);this.map.centerAndZoom(point, 15);this.map.addOverlay(new BMap.Marker(point)); // 添加标注},});local.search(address);},handleMapClick(e) {this.map.clearOverlays(); // 清除地图上所有覆盖物const point = new BMap.Point(e.point.lng, e.point.lat);const marker = new BMap.Marker(point);this.map.addOverlay(marker);this.myGeo.getLocation(point, (geocoderResult) => {this.$set(this.formData, 'positionInfo', geocoderResult.address);this.$set(this.formData, 'lng', e.point.lng);this.$set(this.formData, 'lat', e.point.lat);const value = {address: geocoderResult.address,position: [e.point.lng, e.point.lat],};this.$emit('getValue', value);});},},
};
</script><style lang='scss' scoped>
.baiduMap {width: 100%;height: 500px;
}
</style>

效果如下：

完整代码已经上传github：https://github.com/majinihao123/vue-Component

有需要的自取，麻烦给git一个星星！！！

Vue 百度地图搜索框+点击地图获取坐标

本文通过vueele百度地图，实现点击地图获取坐标，或者搜索框智能联想下拉框，点击获取坐标及地图位置标点。百度地图通过public文件夹下index.html,script方式引入全局代码如下： <template><div><div id"l-…...

编程日记 2025/7/6 12:56:09

Python学习路线

以下是一个Python详细学习路线： 一、入门阶段（第1 - 2个月） 环境搭建与基础语法安装与配置： 从Python官方网站（Download Python | Python.org）下载适合自己操作系统的Python版本并进行安装。配置环境变…...

编程日记 2025/7/1 8:05:05

Web Services 简介

Web Services 简介 1. 引言 Web Services 是一种基于网络的软件服务，它允许不同的应用程序在互联网上相互通信和交互。这种技术是基于开放的互联网标准，如HTTP、XML、SOAP和WSDL，使得不同平台和编程语言的应用程序能够轻松地实现互操作性。Web Services 的出现，极大地推动…...

编程日记 2025/7/3 1:25:33

option api & compose api <script setup> import { ref, computed } from vue; // 原始数据 const data ref([ { position: { x: 1, y: 2 } }, { position: { x: 3, y: 4 } }, { position: { x: 5, y: 6 } } ]); // 数据转换函数 const convertData …...

编程日记 2025/7/1 1:22:35

tcpdump的常见方法

详解tcpdump的使用方法：网络数据包捕获与分析 tcpdump是一个功能强大的命令行工具，用于捕获和分析通过网络接口传输的数据包。它广泛应用于网络故障诊断、网络安全监控和协议分析等领域。本文将详细介绍tcpdump的使用方法，包括安装、基本命令…...

编程日记 2025/6/28 16:31:05

【C语言】可移植性陷阱与缺陷(四)：字符是有符号整数还是无符号整数

在 C 语言中，字符类型（char）是一个字节大小的整数类型，但它可以被编译器解释为有符号整数或无符号整数，这是一个容易导致可移植性问题的重要因素。这种解释的不确定性可能会在程序的逻辑、比较运算和数据处理等多个方面引发错误。一、字符类型的默认行为根据C语言标准…...

编程日记 2025/7/6 9:29:49

[Linux]进程间通信-管道

目录 1. 进程间通信 2.父子进程之间的通信 3.匿名管道匿名管道的创建管道读写的情况管道的5种特性 4.命名管道指令级命名管道原理代码级读取端 1. 进程间通信当我们有两个进程操作数据库的时候，一个进程负责写入操作，一个进…...

编程日记 2025/7/6 12:03:35

设置开机自启动的应用

设置开机自启动的应用 step1：按住ShiftctrlEsc step2：找到启动应用 step3：鼠标到启动那里，右键就可以禁用了...

编程日记 2025/7/6 1:04:31

QQ长截屏

QQ长截屏第一步：CtrlAltA 第二步：点击剪刀之后，再滑动滚轮就可以了。展示...

编程日记 2025/6/28 14:23:36

38 Opencv HOG特征检测

文章目录 HOGDescriptor 构造函数setSVMDetector 设置支持向量机（SVM）检测器，用于目标检测。compute 用于计算图像区域的HOG描述符。detectMultiScale 多尺度检测目标。示例 HOGDescriptor 构造函数 HOGDescriptor(); HOGDescriptor(const S…...

编程日记 2025/7/1 15:14:04

Segment Anything论文详细翻译【Part2：引言Introduction】

目录写在前面 Introduction 第1段第2段第3段第4段第5段第6段第7段第8段第9段第10段第11段第12段 Figure2 关键特点图中具体内容图例说明写在前面为啥要写这篇文章？因为找不到一篇写的特别好的【翻译并仔细解释】文章。网上大多千…...

编程日记 2025/7/5 7:30:04

Mac中配置Node.js前端vscode环境（第二期）

核心组件：vscode、谷歌浏览器、Node.js（重点）、git 一、Node.js安装（nvm安装） 点击macos中的终端，保持bash，而不是zsh 若为zsh，则可在终端中使用下面命令变成bash chsh -s /bin/…...

编程日记 2025/7/4 19:45:20

基于COT（Chain-of-Thought Prompt）的教学应用：如何通过思维链提示提升模型推理能力

引言随着人工智能技术的快速发展，大型语言模型（LLMs）在自然语言处理领域展现出了强大的能力。然而，面对复杂的推理任务时，模型的表现往往不尽如人意，尤其是在需要多步逻辑推导的场景中。为了应对这一挑战…...

编程日记 2025/7/2 4:07:16

Python Notes 1 - introduction with the OpenAI API Development

Official document：https://platform.openai.com/docs/api-reference/chat/create 1. Use APIfox to call APIs 2.Use PyCharm to call APIs 2.1-1 WIN OS.Configure the Enviorment variable #HK代理环境，不需要科学上网(价格便宜、有安全风险&#…...

编程日记 2025/6/30 12:08:01

MySQL图形化界面工具--DataGrip

之前介绍了在命令行进行操作，但是不够直观，本次介绍图形化界面工具–DataGrip。安装DataGrip 官网链接：官网下载链接常规的软件安装流程。参考链接：DataGrip安装使用DataGrip 添加数据源： 第一次使用最下面会…...

编程日记 2025/7/5 10:40:17

WPF+Prism View与ViewModel绑定

1、开发环境，Win10VS2022.NET8Prism.DryIoc（9.0.537）或Prism.Unity。 2、通过NuGet安装Prism.DryIoc（9.0.537）或Prism.Unity。 2.1、创建ViewModels文件夹用于存放ViewModel文件、创建Views文件夹存放View文件。将…...

编程日记 2025/7/4 7:31:58

关于Zotero

1、文献数据库： Zotero的安装 Zotero安装使用_zotero只能安装在c盘吗-CSDN博客 2、如何使用zotero插件我刚下载的时候就结合使用的是下面的这两个博主的分享，感觉暂时是足够的。 Zotero入🚪基础 - 小红书 Green Frog申请easyscholar密钥…...

编程日记 2025/7/2 22:16:36

Luma AI 简单几步生成视频

简单几步生成视频登录我们的 AceDataPlatform 网站，按照下图所示即可生成高质量的视频，同时，我们也提供了简单易用的 API 方便集成调用，可以查看 Luma API了解详情技术介绍我们使用了 Luma 的技术，实现了上面的图…...

编程日记 2025/7/5 7:14:30

从索尼爱立信手机打印短信的简单方法

昨天，我买了一部新手机来代替我的旧索尼爱立信Xperia，但手机上有很多珍贵的短信，是我男朋友发来的，我不想失去它们。然后我尝试打印它们，但我无法从我的索尼爱立信手机中取出它们。您有什么从索尼爱立信手机打印短信的…...

编程日记 2025/7/5 9:33:00

深入浅出梯度下降算法：快速抵达函数最小值的方法

引言梯度是机器学习和优化领域中不可或缺的概念，它为我们提供了理解和调整多维空间中函数行为的工具。本文将详细介绍梯度的定义、性质，并通过具体的一元和多元函数案例展示如何使用梯度下降算法找到最佳参数。一、梯度的基础知识 1.1 定义与计算梯…...

编程日记 2025/7/3 19:22:20

OPC DA激活报错

报错提示： 解决办法： 查看Missing license keys，根据提示破解...

编程日记 2025/6/28 16:44:28

PyTorch到C++再到 CUDA 的调用链（C++ ATen 层）：以torch._amp_update_scale_调用为例

今天在看pytorch源码，遇到的问题，记录一下。 source:/lib/python3.10/site-packages/torch/amp/grad_scaler.py torch._amp_update_scale_(_scale,_growth_tracker,found_inf_combined,self._growth_factor,self._backoff_factor,self._growth_interva…...

编程日记 2025/6/28 14:22:12

yolov5核查数据标注漏报和误报

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、误报二、漏报三、源码总结前言本文主要用于记录数据标注和模型预测之间的漏报和误报思想及其源码提示：以下是本篇文章正文内容，…...

编程日记 2025/7/3 5:03:47

C# 设计模式概况

什么是设计模式大家熟知的GOF23种设计模式，源自《Design Patterns: Elements of Reusable Object-Oriented Software》一书，由 Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides 合著，四人组Gang of Four简称GOF。总结了在面向…...

编程日记 2025/7/1 22:03:11

STM32 NOR FLASH(SPI FLASH)驱动移植(2)

2）FLASH 读取函数 /* * brief 读取 SPI FLASH * note 在指定地址开始读取指定长度的数据 * param pbuf : 数据存储区 * param addr : 开始读取的地址(最大 32bit) * param datalen : 要读取的字节数(最大 65535) * retval 无 */ void norflash_read(uint8_t *pbuf…...

编程日记 2025/7/4 14:32:32

Redis高可用集群部署

根据集群分析和持久化优化方式，这里用docker部署redis分片集群模式并设置为aof-rdb共用方式存储准备 2核4G及以上服务器；安装好docker环境；配置docker镜像仓库（https://www.ecnfo.com:1443），因为下面镜像是从这个镜像仓库下载的{"builder": {"gc"…...

编程日记 2025/7/2 16:41:23

【玩转23种Java设计模式】行为型模式篇：命令模式

软件设计模式（Design pattern），又称设计模式，是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。汇总目录链接&…...

编程日记 2025/7/1 17:29:29

代码随想录算法【Day10】

今日只做一题，剩下的题后面补 232.用栈实现队列 class MyQueue { public:stack<int> stIn;stack<int> stOut;/** Initialize your data structure here. */MyQueue() {}/** Push element x to the back of queue. */void push(int x) {stIn.push(x);}…...

编程日记 2025/7/5 10:54:49

WKWebView打开pdf文件乱码？各种方案整理。

近期有用户反馈使用我们FinClip SDK运行的小程序，在iOS18.0.1的系统上打开部分pdf文件的时候出现了乱码的现象, 低版本的系统打开没有出现乱码的现象，用电脑打开这个pdf文件也是正常的。经过排查，可能是iOS18的系统对WKWebView进行了调整处理…...

编程日记 2025/7/3 13:51:21

Android中创建ViewModel的几种方法

文章目录 1. 使用 `ViewModelProvider`1.1 在 `Activity` 中创建 `ViewModel`1.2 在 `Fragment` 中创建 `ViewModel`2. 使用 `ViewModelFactory`2.1 创建 `ViewModel` 和 `ViewModelFactory`2.2 在 `Activity` 或 `Fragment` 中使用 `ViewModelFactory`3. 使用 `by viewModels(…...

编程日记 2025/7/2 11:31:06

【C语言】_指针运算

目录 1. 指针-整数 2. 指针-指针 2.1 指针-指针含义 2.2 指针-指针运算应用：实现my_strlen函数 3. 指针的关系运算（大小比较） 1. 指针-整数联系关于指针变量类型关于指针类型和指针-整数相关知识： 原文链接如下&#xff1…...

编程日记 2025/7/5 14:34:56

多层设计模式：可否设计各层之间公用的数据定义模块？

在多层程序设计模式中，可以设计一个各层之间公用的数据类型定义模块。这种模块通常被称为“公共模块”或“共享模块”，它包含所有层都需要使用的数据类型定义。这有助于确保数据在不同层之间传递时的一致性和准确性。以下是一些设计这种公用数据类型定…...

编程日记 2025/7/4 13:49:55

深度学习模型格式转换：pytorch2onnx（包含自定义操作符）

将PyTorch模型转换为ONNX（Open Neural Network Exchange）格式是实现模型跨平台部署和优化推理性能的一种常见方法。PyTorch 提供了多种方式来完成这一转换，以下是几种主要的方法： 一、静态模型转换使用 torch.onnx.export() t…...

编程日记 2025/7/4 23:43:47

CDPHudi实战-集成spark

[一]使用Spark-shell 1-配置hudi Jar包 [rootcdp73-1 ~]# for i in $(seq 1 6); do scp /opt/software/hudi-1.0.0/packaging/hudi-spark-bundle/target/hudi-spark3.4-bundle_2.12-1.0.0.jar cdp73-$i:/opt/cloudera/parcels/CDH/lib/spark3/jars/; done hudi-spark3.4-bu…...

编程日记 2025/7/6 3:40:47

Zero to JupyterHub with Kubernetes 下篇 - Jupyterhub on k8s

前言：纯个人记录使用。搭建 Zero to JupyterHub with Kubernetes 上篇 - Kubernetes 离线二进制部署。搭建 Zero to JupyterHub with Kubernetes 中篇 - Kubernetes 常规使用记录。搭建 Zero to JupyterHub with Kubernetes 下篇 - Jupyterhub on k8s。官方文档…...

编程日记 2025/7/2 10:58:15

汇编语言与接口技术--跑马灯

一、实验要求在单片机开发板的LED灯D1~D8上实现跑马灯。LED与单片机引脚连线电路如下图: 单片机芯片选择AT89C51，晶振频率设为12MHz，操作参考单片机开发板使用说明。跑马灯点亮的时间间隔约为1秒。分别用定时器的模式1和模式2实现。（用P83…...

编程日记 2025/6/29 20:10:58

springcloud篇3-docker需熟练掌握的知识点

docker的原理请参考博文《Docker与Kubernetes》。一、安装docker的指令 1.1 安装yum工具 yum install -y yum-utils \device-mapper-persistent-data \lvm2 --skip-broken补充：配置镜像源注意： yum安装是在线联网下载安装，而很多的资源…...

编程日记 2025/7/2 21:09:42

Unity网络通信相关

Socket 通信一张图搞定谁提供服务谁绑定端口，建立Listener,写Host...

编程日记 2025/7/2 10:52:17

leetcode 173.二叉搜索树迭代器栈绝妙思路

以上算法题中一个比较好的实现思路就是利用栈来进行实现，以下方法三就是利用栈来进行实现的，思路很好，很简练。进行next的时候，先是一直拿到左边的子树，直到null为止，这一步比较好思考一点，下一…...

编程日记 2025/7/2 16:41:07

模电面试——设计题及综合分析题0x01（含答案）

1、已知某温控系统的部分电路如下图（EDP070252），晶体管VT导通时，继电器J吸合，压缩机M运转制冷，VT截止时，J释放，M停止运转。 （1）电源刚接通时，晶体…...

编程日记 2025/7/5 9:28:49

Linux性能优化-系列文章-汇总

前言 Linux性能优化，涉及了CPU，内存，磁盘，网络等很多方面，一方面涉及的知识面广，同时又要在原理方面掌握一定的深度。所以整理总结了Linux性能优化的一系列文章。当处理Linux性能问题的时候，可…...

编程日记 2025/7/2 13:04:47

仓库叉车高科技安全辅助设备——AI防碰撞系统N2024G-2

在当今这个高效运作、安全第一的物流时代，仓库作为供应链的中心地带，其安全与效率直接关系到企业的命脉。随着科技的飞速发展，传统叉车作业模式正逐步向智能化、安全化转型，而在这场技术革新中，AI防碰撞系统N2024G-2…...

编程日记 2025/7/2 16:46:34

threejs 安装

参考了threejs官方网站文档安装，上来就是各种报错，最终参考之前大佬发的攻略解决了。过程供大家参考。官方文档地址如下： three.js docshttps://threejs.org/docs/index.html#manual/en/introduction/Installation 具体参考这篇攻略&#…...

编程日记 2025/7/2 20:43:35

《 C++ 点滴漫谈：十七》编译器优化与 C++ volatile：看似简单却不容小觑

摘要本文深入探讨了 C 中的 volatile 关键字，全面解析其基本概念、典型用途以及在现代编程中的实际意义。通过剖析 volatile 的核心功能，我们了解了它如何避免编译器优化对硬件交互和多线程环境中变量访问的干扰。同时，文章分析了 volatile…...

编程日记 2025/7/4 20:27:22

【Vim Masterclass 笔记05】第 4 章：Vim 的帮助系统与同步练习

文章目录 Section 4：The Vim Help System（Vim 帮助系统）S04L14 Getting Help1 打开帮助系统2 退出帮助系统3 查看具体命令的帮助文档4 查看帮助文档中的主题5 帮助文档间的上翻、下翻6 关于 linewise7 查看光标所在术语名词的帮助文档8 关于退…...

编程日记 2025/6/28 15:54:39

电脑中缺失的nvrtc64_90.dll文件如何修复？

一、文件丢失问题案例：nvrtc64_90.dll文件缺失问题分析： nvrtc64_90.dll是NVIDIA CUDA Runtime Compilation库的一部分，通常与NVIDIA的CUDA Toolkit或相关驱动程序一起安装。如果该文件丢失，可能会导致基于CUDA的应用程序&…...

编程日记 2025/6/30 23:45:20

leveldb的DBSequence从哪里来，到哪里去？

(Owed by: 春夜喜雨 http://blog.csdn.net/chunyexiyu) leveldb数据库的DBSequence从哪里来，到哪里去？ 大概的情形是，leveldb的记录初始DBSequence为0，随着记录的增加，记录sequence不断随着增加，并持久化…...

编程日记 2025/7/4 1:15:16

nginx高可用集群搭建

本文介绍nginx高可用集群的搭建。利用keepalived实时检查nginx进程是否存活、keepalived的虚拟ip技术，达到故障转移的目的。终端用户通过访问虚拟ip，感知不到实际发生的故障。架构图如下： 0、环境 Ubuntu：22.04.2 ltsnginx: 1.…...

编程日记 2025/7/2 15:06:05

基于TCP的Qt网络通信

基于TCP的Qt网络通信项目源码：https://github.com/say-Hai/TcpSocketLearn/tree/QTcpSocket 在标准C没有提供专门用于套接字通信的类，所以只能使用操作系统提供的基于C的API函数，但是Qt就不一样了，它是C的一个框架并且里边提供了…...

编程日记 2025/7/2 4:24:33

MySql---进阶篇（六）---SQL优化

6.1：insert的优化： (1)普通的插入数据如果我们需要一次性往数据库表中插入多条记录，可以从以下三个方面进行优化。 insert into tb_test values(1,tom); insert into tb_test values(2,cat); insert into tb_test values(3,jerry); 1). 优…...

编程日记 2025/7/3 23:47:08

相关文章：