Vue2接入高德地图API实现搜索定位和点击获取经纬度及地址功能
目录
一、申请密钥
二、安装element-ui
三、安装高德地图依赖
四、完整代码
五、运行截图
一、申请密钥
登录高德开放平台,点击我的应用,先添加新应用,然后再添加Key。
如图所示填写对应的信息,系统就会自动生成。
二、安装element-ui
没安装的看官方文档:Element - The world's most popular Vue UI framework
三、安装高德地图依赖
npm i @amap/amap-jsapi-loader --save
四、完整代码
把刚才申请好的安全密钥和Key替换进去。
完整代码:
<template><div style="display: flex"><div style="margin-top: 10px"><div><span>搜索地址:</span><el-autocompletev-model="keywords"style="width: 300px":fetch-suggestions="querySearchAsync"placeholder="请输入内容"@select="handleSelect"></el-autocomplete><span style="margin-left: 10px"><span>经度:{{ form.lng }}</span><span style="margin-left: 10px">纬度:{{ form.lat }}</span><span>地址:{{form.address}}</span></span><el-button style="margin-left: 10px" type="danger" size="small" @click="reset">清空</el-button></div><div id="container" class="container"></div></div></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {// 安全密钥securityJsCode: "安全密钥",
};
export default {name: "HomeView",data() {return {// 地图实例map: null,// 标记点marker: "",// 地址逆解析geoCoder: null,// 搜索提示AutoComplete: null,//缩放控件ToolBar:null,//地图放大镜HawkEye:null,// 搜索关键字keywords: "",// 位置信息form: {lng: "119.793098",lat: "31.91243",address:'',},// 搜索节流阀loading: false,// 搜索提示信息options: [],};},created() {this.initMap();},methods: {reset(){this.keywords = '';this.form = {lng: "119.793098",lat: "31.91243",address: '',}// 清除点this.removeMarker();// 标记点this.setMapMarker();},initMap() {AMapLoader.load({// 你申请的Keykey: "Key",version: "2.0",// 需要用到的插件plugins: ["AMap.Geocoder", "AMap.AutoComplete","AMap.ToolBar","AMap.HawkEye"],}).then((AMap) => {this.map = new AMap.Map("container", {viewMode: "3D", //是否为3D地图模式zoom: 23, //初始化地图级别center: [this.form.lng, this.form.lat], //初始化地图中心点位置});//地址逆解析插件this.geoCoder = new AMap.Geocoder({city: "010", //城市设为北京,默认:“全国”radius: 1000, //范围,默认:500});// 搜索提示插件this.AutoComplete = new AMap.AutoComplete({ city: "全国" });this.ToolBar = new AMap.ToolBar({position: {bottom: '210px',right: '35px'}});this.HawkEye = new AMap.HawkEye({position: {bottom: '110px',left: '35px'}});this.map.addControl(this.ToolBar);this.map.addControl(this.HawkEye);// 清除点this.removeMarker();// 标记点this.setMapMarker();//点击获取经纬度;this.map.on("click", (e) => {// 获取经纬度this.form.lng = e.lnglat.lng;this.form.lat = e.lnglat.lat;// 清除点this.removeMarker();// 标记点this.setMapMarker();});}).catch((err) => {// 错误});},// 标记点setMapMarker() {// 自动适应显示想显示的范围区域this.map.setFitView();this.marker = new AMap.Marker({map: this.map,position: [this.form.lng, this.form.lat],});// 逆解析地址this.toGeoCoder();this.map.setFitView();this.map.add(this.marker);},// 清除点removeMarker() {if (this.marker) {this.map.remove(this.marker);}},// 逆解析地址toGeoCoder() {let lnglat = [this.form.lng, this.form.lat];this.geoCoder.getAddress(lnglat, (status, result) => {if (status === "complete") {this.form.address = result.regeocode.formattedAddress;}else {this.form.address = '';}});},querySearchAsync(queryString, cb){if (queryString) {this.AutoComplete.search(queryString, (status, result) => {if(status === 'complete'){this.options = result.tips;for (let i = 0; i < this.options.length; i++) {this.options[i].value = this.options[i].name;}}else {this.options = [];}cb(this.options);});} else {this.options = [];cb(this.options);}},handleSelect(val){// 清空时不执行后面代码if (!val) {return;}this.form = {lng: val.location.lng,lat: val.location.lat,};// 清除点this.removeMarker();// 标记点this.setMapMarker();},},mounted() {},
};
</script><style>
.container {margin-top: 10px;width: 1280px;height: 720px;
}
</style>
五、运行截图
直接运行项目,效果如下:
更多用法请参考官方文档:添加地图控件-入门教程-地图 JS API 2.0 | 高德地图API
相关文章:

Vue2接入高德地图API实现搜索定位和点击获取经纬度及地址功能
目录 一、申请密钥 二、安装element-ui 三、安装高德地图依赖 四、完整代码 五、运行截图 一、申请密钥 登录高德开放平台,点击我的应用,先添加新应用,然后再添加Key。 如图所示填写对应的信息,系统就会自动生成。 二、安装…...

msvcp140.dll丢失如何解决?msvcp140.dll丢失的多种解决方法
在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是“msvcp140.dll丢失”。这个错误通常会导致某些应用程序无法正常运行,给用户带来很大的困扰。那么,当我们遇到msvcp140.dll丢失的情况时,应该如何解决呢&a…...

高效财税自动化软件如何提升企业财务工作的效率与准确性
在当今企业运营中,财务管理发挥着核心作用。它不仅涉及企业正常运转和市场决策,还是推动企业向高质量发展迈进的关键动力。面对激烈的市场竞争与科技革新的双重挑战,财务管理亟需进行持续的转型与提升,为企业高质量发展目标的实现…...
Leetcode 3286. Find a Safe Walk Through a Grid
Leetcode 3286. Find a Safe Walk Through a Grid 1. 解题思路2. 代码实现 题目链接:3286. Find a Safe Walk Through a Grid 1. 解题思路 这一题的话思路上就是一个宽度优先遍历,我们按照health进行排序进行宽度优先遍历,看看在health被消…...

shell脚本语法
shell脚本的变量 系统变量 系统变量是操作系统用来存储配置信息的变量,它们可以控制操作系统的行为和程序的运行环境。系统变量的种类和内容取决于操作系统的类型和版本。以下是一些常见的系统变量类别和它们可能包含的内容: 环境变量:这些…...

TCP 拥塞控制:一场网络数据的交通故事
从前有条“高速公路”,我们叫它互联网,而这条公路上的车辆,则是数据包。你可以把 TCP(传输控制协议)想象成一位交通警察,负责管理这些车辆的行驶速度,以防止交通堵塞——也就是网络拥塞。 第一…...

(黑马点评) 五、探店达人系列功能实现
5.1 发布和查看探店笔记 5.1.1 发布探店笔记 这块代码黑马已经完成了,在发布探店笔记界面,有两块内容是需要上传的。一是笔记内容,二是笔记配图。其中笔记配图部分黑马使用的是上传到本地前端服务器上面的。我我觉得可以将图片文件发布在阿里…...
SQLiteDatabase insert or replace数据不生效
在Android开发中,如果您在SQLite数据库中更新了数据,但重启应用后更新的数据不再生效,那么可能的原因有: 更新操作没有正确执行,可能是由于SQL语句错误或者数据库没有正确打开。 更新操作在事务中没有被正确提交。 更…...
基于Python实现一个浪漫烟花秀
为了实现一个类似烟花秀的效果,我们可以通过复杂的粒子系统来模拟烟花的升起、绽放和下落效果。以下是一个示例,旨在创建更为动态和逼真的烟花秀效果。 示例代码 这个代码示例将使用 matplotlib 和 numpy,并实现更丰富的视觉效果࿱…...

电气自动化入门03:安全用电
视频链接:2.1 电工知识:触电原因与防触电措施_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1PJ41117PW/?p4&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 1.电流对人体的危害 电击:电流通过人体。 电伤:电流热效应…...

【深度学习】(2)--PyTorch框架认识
文章目录 PyTorch框架认识1. Tensor张量定义与特性创建方式 2. 下载数据集下载测试展现下载内容 3. 创建DataLoader(数据加载器)4. 选择处理器5. 神经网络模型构建模型 6. 训练数据训练集数据测试集数据 7. 提高模型学习率 总结 PyTorch框架认识 PyTorc…...

前端面试记录
js 1. 函数式编程 将计算过程视为一系列的函数调用,函数的输出完全由输入决定,不依赖于或改变程序的状态,使得函数式编程的代码更加可预测和易于理解。 函数式编程的三个核心概念:纯函数、高阶函数和柯里化。 高阶函数:函数可以作为参数传…...

裁员了,很严重,大家做好准备吧!
最近刷到这样一个故事: 一个网友在大厂当牛马接近10年,部门优秀员工,业绩一直很稳,没想到,今年公司引进AI降本增效,开始大幅裁员,有些部门一夜之间被连锅端! 上个月果然轮到他了&a…...
uniapp组件uni-datetime-picker选择年月后在ios上日期不显示
uniapp组件uni-datetime-picker选择年月后在ios上日期不显示 操作步骤: ios 选择年月 预期结果: 日期变为选择年月的日期 实际结果: 日期不显示 bug描述: uni-datetime-picker 2.2.22 ios点击年月选择后日期不显示 解决方案 …...
01_快速入门
读取数据 import pandas as pd# df pd.read_excel(https://xxxx/xxx//xx.xslx) # 读取网络数据 # df pd.read_excel(rd:\data\xx.xslx) # 读取本地文件 # 如果是csv文件,用read_csv()函数 df pd.read_csv(seaborn/iris.csv)查看数据 df.head() # 前5条记录 d…...

数据结构之分文件编译学生管理
list.h #ifndef LIST_H_ #define LIST_H_ #define MAX 30 typedef struct {int id;//学号char name[20];//姓名char major[20];//专业int age;//年龄 }student,*Pstudent;typedef struct {student data[MAX];//储存学生信息的数组int len;//统计学生个数 }list,*Plist;Plist c…...

TypeScript入门 (二)控制语句
引言 大家好,我是GISer Liu😁,一名热爱AI技术的GIS开发者。本系列文章是我跟随DataWhale 2024年9月学习赛的TypeScript学习总结文档。本文主要讲解TypeScript中控制语句的部分;希望通过我的知识点总结,能够帮助你更好地…...

MVP 最简可行产品
MVP(最小可行产品)是一种产品开发策略,其主要目的是用最少的时间和资源,开发一个包含最基本必要功能的产品。这样做的目的是能够以最小的成本进入市场,获取用户反馈,再根据反馈逐步优化产品。 MVP是什么 …...

数仓工具:datax
datax可以理解为sqoop的优化版, 速度比sqoop快 因为sqoop底层是map任务,而datax底层是基于内存 DataX 是一个异构数据源离线同步工具,致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP等各种异构数据源之间稳定…...

CSS传统布局方法(补充)——WEB开发系列37
开发技术不断演进,布局方式也经历了多个阶段的变革。从最初的基于表格布局到 CSS 的浮动布局,再到今天的弹性盒(Flexbox)与 CSS Grid 网格布局,每一种布局方式都有其独特的背景和解决特定问题的优势。 一、CSS Grid 出…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...

51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...

均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架:基于 (一个现代化的 React 节点绘图库) 功能: 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用
前言:我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM(Java Virtual Machine)让"一次编写,到处运行"成为可能。这个软件层面的虚拟化让我着迷,但直到后来接触VMware和Doc…...
第八部分:阶段项目 6:构建 React 前端应用
现在,是时候将你学到的 React 基础知识付诸实践,构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段,你可以先使用模拟数据,或者如果你的后端 API(阶段项目 5)已经搭建好,可以直接连…...

图解JavaScript原型:原型链及其分析 | JavaScript图解
忽略该图的细节(如内存地址值没有用二进制) 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么:保存在堆中一块区域,同时在栈中有一块区域保存其在堆中的地址(也就是我们通常说的该变量指向谁&…...

基于江科大stm32屏幕驱动,实现OLED多级菜单(动画效果),结构体链表实现(独创源码)
引言 在嵌入式系统中,用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例,介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单,执行相应操作,并提供平滑的滚动动画效果。 本文设计了一个…...