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

vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情

PC端高德地图使用步骤:

1、注册并登录高德开放平台获取
2、安装高德依赖(amap-jsapi-loader)
3、初始化地图
4、首次打开地图获取当前定位并标记
5、根据已有地址自动定位到指定地址并标记
6、新增、清除标记及自定义信息窗体
7、鼠标点击地图并选点标记
8、根据关键字搜索并自动定位
9、效果图
10、完整代码

高德官方api:高德官方开放平台

一、注册并登录高德开放平台获取(key和秘钥)
在这里插入图片描述
引用:

<script>import AMapLoader from '@amap/amap-jsapi-loader';window._AMapSecurityConfig = {securityJsCode: '**************************',//你的秘钥}</script>

二、安装高德依赖

npm i @amap/amap-jsapi-loader --save

三、初始化地图
封装公共的地图组件:

 <map-container :positionInfo ='positionInfo' @select ='getLocationInfo'></map-container>
 mounted() {this.initMap()},methods:{initMap(){AMapLoader.load({key:"**********************", // 申请好的Web端开发者Key,首次调用 load 时必填version:"2.0",      // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: [          //需要使用的插件'AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch','AMap.AutoComplete','AMap.Geocoder','AMap.CitySearch'],resizeEnable: true,}).then((AMap)=>{const that = this;that.map = new AMap.Map("container",{  //设置地图容器idviewMode:"3D",    //是否为3D地图模式zoom:12,          //初始化地图级别});}).catch(e=>{console.log(e);})},

四、首次打开地图获取当前定位并标记


initMap(){AMapLoader.load({key:"*******************", // 申请好的Web端开发者Key,首次调用 load 时必填version:"2.0",      // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch','AMap.AutoComplete','AMap.Geocoder','AMap.CitySearch'],resizeEnable: true,}).then((AMap)=>{const that = this;that.map = new AMap.Map("container",{  //设置地图容器idviewMode:"3D",    //是否为3D地图模式zoom:12,          //初始化地图级别});that.getCurrentLocation();//获取当前定位that.geocoder = new AMap.Geocoder()that.map.addControl(new AMap.Scale())  // 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺that.map.addControl(new AMap.ToolBar())  //在图面添加鹰眼控件,在地图右下角显示地图的缩略图}).catch(e=>{console.log(e);})},//获取当前定位getCurrentLocation(){const that = this;that.geolocation = new AMap.Geolocation({timeout: 3000,          //超过3秒后停止定位,默认:5senableHighAccuracy: true,zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点});that.geolocation.getCurrentPosition(function(status,result){//备注:getCurrentPosition方法会调用超时或失败://Get geolocation time out:浏览器定位超时,包括原生的超时,可以适当增加超时属性的设定值以减少这一现象。//另外还有个别浏览器(如google Chrome浏览器等)本身的定位接口是黑洞,通过其请求定位完全没有回应,也会超时返回失败。//Get geolocation failed:定位失败,Chrome、火狐以及部分套壳浏览器接入的定位服务在国外,有较大限制,失败率高。console.log(status,result);if(status=='complete'){that.onComplete(result)}else{that.onError(result) //失败后可使用getCityInfo获取非精准定位(具体到省市)}});},//解析定位结果onComplete(data) {console.log('定位结果:' + data.position) //经纬度信息let lnglat = data.position;let marker = new AMap.Marker({  //创建标记position: new AMap.LngLat(lnglat[0], lnglat[1])})this.map.clearMap()// 清除所有覆盖物(点标志)this.map.add(marker)// 添加点标志let that = this//经纬度转换为中文地址详情that.geocoder.getAddress(lnglat, function (status, result) {if (status === 'complete' && result.regeocode) {that.address = result.regeocode.formattedAddress;that.showInfoWindow(marker);//自定义信息窗体} else {that.$message.error('根据经纬度查询地址失败')}})},//解析定位错误信息onError(data) {this.getLngLatLocation()},//在获取具体定位失败时调用的代码:(非精准定位!!!)getLngLatLocation() {const that = this;that.geolocation.getCityInfo(function (status, result) {if (status === 'complete') {let data = result.positionthat.address = result.province + result.city;that.showLocation(data)} else {that.$message.error('获取地址失败')}})},

五、根据已有地址自动定位到指定地址并标记

initMap(){AMapLoader.load({key:"*******************", // 申请好的Web端开发者Key,首次调用 load 时必填version:"2.0",      // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch','AMap.AutoComplete','AMap.Geocoder','AMap.CitySearch'],resizeEnable: true,}).then((AMap)=>{const that = this;that.map = new AMap.Map("container",{  //设置地图容器idviewMode:"3D",    //是否为3D地图模式zoom:15,           //初始化地图级别center:[that.positionInfo.lng,that.positionInfo.lat];   // 首次加载地图自动加载到指定位置中心});that.showLocation(data) //新增标记并展示信息窗体that.map.addControl(new AMap.Scale())  // 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺that.map.addControl(new AMap.ToolBar())  //在图面添加鹰眼控件,在地图右下角显示地图的缩略图}).catch(e=>{console.log(e);})},

六、新增、清除标记及自定义信息窗体

//新增标记
showLocation(data){let marker = new AMap.Marker({position: new AMap.LngLat( data[0],data[1]) //参数为经纬度})this.map.clearMap()// 清除所有覆盖物(点标志)this.map.add(marker)// 添加点标志this.showInfoWindow(marker);//自定义信息窗体},
//自定义信息窗体
showInfoWindow(marker){let infoWindow = new AMap.InfoWindow({isCustom: true, //是否自定义信息窗体content:  `<div style="background-color: white;padding: 0 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址:${this.address}</div>`,closeWhenClickMap: true,zIndex: 999,offset: new AMap.Pixel(16, -35)});infoWindow.open(this.map, marker.getPosition());
},

七、鼠标点击地图并选点标记

 initMap(){AMapLoader.load({key:"*******************", // 申请好的Web端开发者Key,首次调用 load 时必填version:"2.0",      // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch','AMap.AutoComplete','AMap.Geocoder','AMap.CitySearch'],resizeEnable: true,}).then((AMap)=>{const that = this;that.map = new AMap.Map("container",{  //设置地图容器idviewMode:"3D",    //是否为3D地图模式zoom:12,           //初始化地图级别});that.geocoder = new AMap.Geocoder()that.map.addControl(new AMap.Scale())  // 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺that.map.addControl(new AMap.ToolBar())  //在图面添加鹰眼控件,在地图右下角显示地图的缩略图that.handleClick(AMap)//地图选点}).catch(e=>{console.log(e);})},//点击地图获取地理位置handleClick(){this.map.on('click', (e) => {let lng = e.lnglat.lnglet lat = e.lnglat.latlet marker = new AMap.Marker({position: new AMap.LngLat(lng, lat)})this.map.clearMap()// 清除所有覆盖物(点标志)this.map.add(marker)// 添加点标志let lnglat = [lng, lat]let that = thisthat.geocoder.getAddress(lnglat, function (status, result) {if (status === 'complete' && result.regeocode) {that.address = result.regeocode.formattedAddress;that.showInfoWindow(marker);//自定义信息窗体let thisPosition = {address: that.address,lng: lng,lat: lat};that.$emit("select",thisPosition) //返回给父组件} else {that.$message.error('根据经纬度查询地址失败')}})})},

八、根据关键字搜索并自动定位

//搜索框及搜索结果选择窗
<template><div>//搜索框<div class="map-box"><div class="label">关键字搜索</div><el-inputv-model="mapAddress"placeholder="请输入内容"id="tipinput"@keyup.enter.native="searchKeyWord"></el-input><el-button type="primary" @click="searchKeyWord"  icon="el-icon-search" ></el-button></div>//搜索结果选择窗<div class="map_search_result"  v-if="showSearchResult"><ul><li  @click="markerResult(item)" v-for="(item,index) in poiList" :key="index">{{item.name}}</li></ul></div>//地图<div id="container" :style="{width: width, height: height}"></div></div>
</template>
initMap(){AMapLoader.load({key:"*******************", // 申请好的Web端开发者Key,首次调用 load 时必填version:"2.0",      // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ['AMap.ToolBar','AMap.Scale','AMap.Geolocation','AMap.PlaceSearch','AMap.AutoComplete','AMap.Geocoder','AMap.CitySearch'],resizeEnable: true,}).then((AMap)=>{const that = this;that.map = new AMap.Map("container",{  //设置地图容器idviewMode:"3D",    //是否为3D地图模式zoom:12,           //初始化地图级别});that.handleClick(AMap)//地图选点that.map.addControl(new AMap.Scale())  // 在图面添加比例尺控件,展示地图在当前层级和纬度下的比例尺that.map.addControl(new AMap.ToolBar())  //在图面添加鹰眼控件,在地图右下角显示地图的缩略图that.geocoder = new AMap.Geocoder()that.mapSearchInit()}).catch(e=>{console.log(e);})},
 /** 初始化搜索 */mapSearchInit(){let autoOptions = {input: "tipInput",}let autoCompleteComponent= new AMap.Autocomplete(autoOptions);this.autoCompleteComponent = autoCompleteComponent;// 注册placeSearch组件this.placeSearchComponent = new AMap.PlaceSearch()},//根据输入内容查询searchKeyWord(){let that= thisthat.placeSearchComponent.search(that.mapAddress, function (status, result) {if(status==='complete' && result.info === "OK"){that.showsearchResult = truethat.poiList = result.poiList.pois}else{that.showsearchResult = falsethat.poiList = []that.$message({message: "没有查到结果",type: "warning",});}})},//选择搜索的内容markerResult(data){this.showsearchResult = false;this.address = data.name;var marker = new AMap.Marker({position: [Number(data.location.lng),Number(data.location.lat)],});this.map.clearMap()// 清除所有覆盖物(点标志)this.map.add(marker)// 添加点标志this.showInfoWindow(marker);setTimeout(() => {this.map.setCenter(data.location);this.map.setZoom(15);}, 50)let thisPosition = {address: this.address,lng: data.location.lng,lat: data.location.lat};this.$emit("select",thisPosition)},

九、效果图
在这里插入图片描述
十、完整代码
点赞收藏留言会提供哈~~~

相关文章:

vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情

PC端高德地图使用步骤&#xff1a; 1、注册并登录高德开放平台获取 2、安装高德依赖&#xff08;amap-jsapi-loader&#xff09; 3、初始化地图 4、首次打开地图获取当前定位并标记 5、根据已有地址自动定位到指定地址并标记 6、新增、清除标记及自定义信息窗体 7、鼠标点击地…...

服务器数据恢复-DS5300存储raid5硬盘出现坏道离线的数据恢复案例

服务器数据恢复环境&#xff1a; 某单位一台DS5300存储&#xff0c;1个主机4个扩展柜&#xff0c;组建了2组RAID5&#xff08;一组27块硬盘&#xff0c;一组23块盘&#xff09;。27块盘的那组RAID5阵列存放Oracle数据库文件&#xff0c;存储系统一共分了11个卷。 服务器故障&a…...

K8S存储总结持久化存储解决方案(以NFS为例)

目录 K8S存储 一、emptydir 1. emptydir是什么 2. emptydir例子 二、hostpath hostpath 是什么 hostpath 例子 弊端 三、持久化存储 1.Persistent Volume(PV) 2.Persistent Volume Claim(PVC) 3.PV/PVC结合NFS使用实践&#xff08;持久存储&#xff09; 1. NFS服务…...

vue3+ts项目02-安装eslint、prettier和sass

创建项目 项目创建 安装eslint yarn add eslint -D生成配置文件 npx eslint --init安装其他插件 yarn add -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node babel/eslint-parser vue-e…...

sface人脸相似度检测

sface人脸相似度检测&#xff0c;基于OPENCV&#xff0c;人脸检测采用yunet&#xff0c;人脸识别采用sface&#xff0c;支持PYTHON/C开发&#xff0c;图片来自网络&#xff0c;侵权请联系本人立即删除 yunet人脸检测sface人脸识别&#xff0c;检测两张图片的人脸相似度...

设计模式 - 行为型模式考点篇:模板方法模式(概念 | 案例实现 | 优缺点 | 使用场景)

目录 一、行为型模式 1.1、模板方法模式 1.1.1、概念 1.1.2、案例实现 1.1.3、优缺点 1.1.4、使用场景 一、行为型模式 一句话概括行为型模式 行为型模式&#xff1a;类或对象间如何交互、如何划分职责&#xff0c;从而更好的完成任务. 1.1、模板方法模式 1.1.1、概念 …...

因为计算机中找不到mfc140.dll无法启动修复步骤分享

mfc140.dll是Microsoft Foundation Class Library&#xff08;微软基础类库&#xff09;的一个组件&#xff0c;它是许多Windows应用程序&#xff08;尤其是使用MFC编写的程序&#xff09;所必需的动态链接库。MFC&#xff08;Microsoft Foundation Classes&#xff09;是一个用…...

【Python基础-Pandas】解决Pandas会自动把None转成NaN的问题

1. 背景 目前dataframe中的数据如下&#xff0c;power字段表示功率值&#xff0c;第一个值为20.0&#xff0c;第二个值为None。需要计算电量值&#xff0c;电量 功率 * 0.25&#xff0c;并保存到energy字段中&#xff0c;如果功率值为None&#xff0c;则电量值也为None。 pow…...

学习记忆——数学篇——案例——代数——方程——一元二次方程

重点记忆法 a x 2 b x c 0 ax^2bxc0 ax2bxc0 整体可以由&#xff1a; 根&#xff08;多少&#xff0c;正负&#xff0c;区间&#xff09; ⟹ \Longrightarrow ⟹ △ △ △ ⟹ \Longrightarrow ⟹ 求根公式 x 1 , 2 x_{1,2} x1,2​ − b △ 2 a \frac{-b\sqrt{△}}{2a} 2…...

接口测试及常用接口测试工具

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你…...

【java学习】数组中涉及的常见算法-含冒泡排序(11)

文章目录 1. 最大值、最小值、总和、平均数2. 数组的复制、反转3. 数组元素的排序3.1. 排序方式3.1.1. 冒泡排序 1. 最大值、最小值、总和、平均数 代码如下&#xff1a; public class Test1 {public static void main (String[] args) {int[] arr new int[] {4,2,7,1,3,5};/…...

useEffect Hook使用纠错

React的useEffect Hook是用于处理副作用操作的重要工具。副作用操作通常包括数据获取、订阅、手动DOM操作等。在使用useEffect时&#xff0c;有一些常见的错误和最佳实践需要注意。 以下是一些常见的useEffect使用错误以及如何解决它们的建议&#xff1a; 未清除订阅或定时器…...

LeetCode【739】每日温度

题目&#xff1a; 思路&#xff1a; https://www.bilibili.com/video/BV1PJ411H7P7/?spm_id_from333.337.search-card.all.click&vd_source2f682a60feabf0f730ad09e0f980ce83 单调栈 思考&#xff1a; 解决栈类问题&#xff0c;思考入栈&#xff0c;出栈条件&#xff1b;…...

核桃派walnutpi添加红外遥控器键盘映射(其他的linux板子同理)ir-keytable

01studio终于又发布新品了&#xff0c;全志h616 linux开发板核桃派&#xff0c;正好我也打算学习linux&#xff0c;做为我的启蒙公司&#xff0c;必须支持果断入了一个。 这个板子自带红外接收头&#xff0c;比较少见&#xff0c;一般都需要自己加&#xff0c;看官网文档&…...

cartographer(2)-launch-lua的配置

1.了解bag 1roscore2rosbag info rslidar-outdoor-gps.bag了解bag中topic的名称与类型duration: 3:33s types: geometry_msgs?QuaternionStamped nav_msgs_Odometry sensor_msgs/Imu sensor_msgs/IaserScan sensor_msgs/NavSatFix sensor_msgs/PointCloud2 tf2 msgs/TFMe…...

【C++设计模式之责任链模式:行为型】分析及示例

简介 责任链模式是一种行为型设计模式&#xff0c;它允许将请求沿着处理链传递&#xff0c;直到有一个处理器能够处理该请求。这种模式将请求的发送者和接收者解耦&#xff0c;同时提供了更高的灵活性和可扩展性。 描述 责任链模式由多个处理器组成一个处理链&#xff0c;每…...

如何选择编程语言Python Go还是Rust?

选择编程语言需要考虑多个方面&#xff0c;包括语言的特性、社区支持、工作机会、学习曲线等。下面是关于Python Go和Rust的一些介绍。 1.基本语法 1. Python: Python 是一种脚本语言&#xff0c;以简洁、易读的语法著称。以下是 Python 的基本语法示例&#xff1a; # Hello…...

CAN和CANFD通信介绍

CAN&#xff08;Controller Area Network&#xff0c;控制器局域网&#xff09;是一种串行通信技术&#xff0c;专门用于在汽车电子控制单元&#xff08;ECU&#xff09;之间实现可靠的数据交换。 CAN协议介绍 电子化 汽车近年来的发展呈现出以电子化为主的特点。电子化的主…...

解决网页 H5 对接微信 JSSDK 后自定义分享和跳转APP等没效果

导致的原因 在聊天窗口直接点击一个文本链接&#xff0c;现在微信JSSDK已经不支持这样使用。 解决办法1 将文本链接生成一个二维码&#xff0c;然后微信扫码进入这个链接。 解决办法2 将这个文本链接收藏&#xff0c;然后从收藏打开这个链接。...

基于DeOldify的给黑白照片、视频上色

老照片常常因为当时的技术限制而只有黑白版本。然而现代的 AI 技术&#xff0c;如 DeOldify&#xff0c;可以让这些照片重现色彩。 本教程将详细介绍如何使用 DeOldify 来给老照片上色。 文章目录 准备工作执行代码图片上色视频上色 总结 准备工作 这里用 git clone 命令克隆…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

车载诊断架构 --- ZEVonUDS(J1979-3)简介第一篇

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…...

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...

五、jmeter脚本参数化

目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...