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

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 三、安装高德地图依赖 四、完整代码 五、运行截图 一、申请密钥 登录高德开放平台&#xff0c;点击我的应用&#xff0c;先添加新应用&#xff0c;然后再添加Key。 如图所示填写对应的信息&#xff0c;系统就会自动生成。 二、安装…...

msvcp140.dll丢失如何解决?msvcp140.dll丢失的多种解决方法

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

高效财税自动化软件如何提升企业财务工作的效率与准确性

在当今企业运营中&#xff0c;财务管理发挥着核心作用。它不仅涉及企业正常运转和市场决策&#xff0c;还是推动企业向高质量发展迈进的关键动力。面对激烈的市场竞争与科技革新的双重挑战&#xff0c;财务管理亟需进行持续的转型与提升&#xff0c;为企业高质量发展目标的实现…...

Leetcode 3286. Find a Safe Walk Through a Grid

Leetcode 3286. Find a Safe Walk Through a Grid 1. 解题思路2. 代码实现 题目链接&#xff1a;3286. Find a Safe Walk Through a Grid 1. 解题思路 这一题的话思路上就是一个宽度优先遍历&#xff0c;我们按照health进行排序进行宽度优先遍历&#xff0c;看看在health被消…...

shell脚本语法

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

TCP 拥塞控制:一场网络数据的交通故事

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

(黑马点评) 五、探店达人系列功能实现

5.1 发布和查看探店笔记 5.1.1 发布探店笔记 这块代码黑马已经完成了&#xff0c;在发布探店笔记界面&#xff0c;有两块内容是需要上传的。一是笔记内容&#xff0c;二是笔记配图。其中笔记配图部分黑马使用的是上传到本地前端服务器上面的。我我觉得可以将图片文件发布在阿里…...

SQLiteDatabase insert or replace数据不生效

在Android开发中&#xff0c;如果您在SQLite数据库中更新了数据&#xff0c;但重启应用后更新的数据不再生效&#xff0c;那么可能的原因有&#xff1a; 更新操作没有正确执行&#xff0c;可能是由于SQL语句错误或者数据库没有正确打开。 更新操作在事务中没有被正确提交。 更…...

基于Python实现一个浪漫烟花秀

为了实现一个类似烟花秀的效果&#xff0c;我们可以通过复杂的粒子系统来模拟烟花的升起、绽放和下落效果。以下是一个示例&#xff0c;旨在创建更为动态和逼真的烟花秀效果。 示例代码 这个代码示例将使用 matplotlib 和 numpy&#xff0c;并实现更丰富的视觉效果&#xff1…...

电气自动化入门03:安全用电

视频链接&#xff1a;2.1 电工知识&#xff1a;触电原因与防触电措施_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1PJ41117PW/?p4&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 1.电流对人体的危害 电击&#xff1a;电流通过人体。 电伤&#xff1a;电流热效应…...

【深度学习】(2)--PyTorch框架认识

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

前端面试记录

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

裁员了,很严重,大家做好准备吧!

最近刷到这样一个故事&#xff1a; 一个网友在大厂当牛马接近10年&#xff0c;部门优秀员工&#xff0c;业绩一直很稳&#xff0c;没想到&#xff0c;今年公司引进AI降本增效&#xff0c;开始大幅裁员&#xff0c;有些部门一夜之间被连锅端&#xff01; 上个月果然轮到他了&a…...

uniapp组件uni-datetime-picker选择年月后在ios上日期不显示

uniapp组件uni-datetime-picker选择年月后在ios上日期不显示 操作步骤&#xff1a; ios 选择年月 预期结果&#xff1a; 日期变为选择年月的日期 实际结果&#xff1a; 日期不显示 bug描述&#xff1a; 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文件&#xff0c;用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入门 (二)控制语句

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

MVP 最简可行产品

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

数仓工具:datax

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

CSS传统布局方法(补充)——WEB开发系列37

开发技术不断演进&#xff0c;布局方式也经历了多个阶段的变革。从最初的基于表格布局到 CSS 的浮动布局&#xff0c;再到今天的弹性盒&#xff08;Flexbox&#xff09;与 CSS Grid 网格布局&#xff0c;每一种布局方式都有其独特的背景和解决特定问题的优势。 一、CSS Grid 出…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

51c自动驾驶~合集58

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

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 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技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...

第八部分:阶段项目 6:构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

基于江科大stm32屏幕驱动,实现OLED多级菜单(动画效果),结构体链表实现(独创源码)

引言 在嵌入式系统中&#xff0c;用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例&#xff0c;介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单&#xff0c;执行相应操作&#xff0c;并提供平滑的滚动动画效果。 本文设计了一个…...