当前位置: 首页 > 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 出…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...