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

服务器数据恢复-DS5300存储raid5硬盘出现坏道离线的数据恢复案例
服务器数据恢复环境: 某单位一台DS5300存储,1个主机4个扩展柜,组建了2组RAID5(一组27块硬盘,一组23块盘)。27块盘的那组RAID5阵列存放Oracle数据库文件,存储系统一共分了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使用实践(持久存储) 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人脸相似度检测,基于OPENCV,人脸检测采用yunet,人脸识别采用sface,支持PYTHON/C开发,图片来自网络,侵权请联系本人立即删除 yunet人脸检测sface人脸识别,检测两张图片的人脸相似度...

设计模式 - 行为型模式考点篇:模板方法模式(概念 | 案例实现 | 优缺点 | 使用场景)
目录 一、行为型模式 1.1、模板方法模式 1.1.1、概念 1.1.2、案例实现 1.1.3、优缺点 1.1.4、使用场景 一、行为型模式 一句话概括行为型模式 行为型模式:类或对象间如何交互、如何划分职责,从而更好的完成任务. 1.1、模板方法模式 1.1.1、概念 …...

因为计算机中找不到mfc140.dll无法启动修复步骤分享
mfc140.dll是Microsoft Foundation Class Library(微软基础类库)的一个组件,它是许多Windows应用程序(尤其是使用MFC编写的程序)所必需的动态链接库。MFC(Microsoft Foundation Classes)是一个用…...
【Python基础-Pandas】解决Pandas会自动把None转成NaN的问题
1. 背景 目前dataframe中的数据如下,power字段表示功率值,第一个值为20.0,第二个值为None。需要计算电量值,电量 功率 * 0.25,并保存到energy字段中,如果功率值为None,则电量值也为None。 pow…...

学习记忆——数学篇——案例——代数——方程——一元二次方程
重点记忆法 a x 2 b x c 0 ax^2bxc0 ax2bxc0 整体可以由: 根(多少,正负,区间) ⟹ \Longrightarrow ⟹ △ △ △ ⟹ \Longrightarrow ⟹ 求根公式 x 1 , 2 x_{1,2} x1,2 − b △ 2 a \frac{-b\sqrt{△}}{2a} 2…...

接口测试及常用接口测试工具
首先,什么是接口呢? 接口一般来说有两种,一种是程序内部的接口,一种是系统对外的接口。 系统对外的接口:比如你要从别的网站或服务器上获取资源或信息,别人肯定不会把数据库共享给你,他只能给你…...
【java学习】数组中涉及的常见算法-含冒泡排序(11)
文章目录 1. 最大值、最小值、总和、平均数2. 数组的复制、反转3. 数组元素的排序3.1. 排序方式3.1.1. 冒泡排序 1. 最大值、最小值、总和、平均数 代码如下: 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时,有一些常见的错误和最佳实践需要注意。 以下是一些常见的useEffect使用错误以及如何解决它们的建议: 未清除订阅或定时器…...

LeetCode【739】每日温度
题目: 思路: https://www.bilibili.com/video/BV1PJ411H7P7/?spm_id_from333.337.search-card.all.click&vd_source2f682a60feabf0f730ad09e0f980ce83 单调栈 思考: 解决栈类问题,思考入栈,出栈条件;…...

核桃派walnutpi添加红外遥控器键盘映射(其他的linux板子同理)ir-keytable
01studio终于又发布新品了,全志h616 linux开发板核桃派,正好我也打算学习linux,做为我的启蒙公司,必须支持果断入了一个。 这个板子自带红外接收头,比较少见,一般都需要自己加,看官网文档&…...
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++设计模式之责任链模式:行为型】分析及示例
简介 责任链模式是一种行为型设计模式,它允许将请求沿着处理链传递,直到有一个处理器能够处理该请求。这种模式将请求的发送者和接收者解耦,同时提供了更高的灵活性和可扩展性。 描述 责任链模式由多个处理器组成一个处理链,每…...
如何选择编程语言Python Go还是Rust?
选择编程语言需要考虑多个方面,包括语言的特性、社区支持、工作机会、学习曲线等。下面是关于Python Go和Rust的一些介绍。 1.基本语法 1. Python: Python 是一种脚本语言,以简洁、易读的语法著称。以下是 Python 的基本语法示例: # Hello…...

CAN和CANFD通信介绍
CAN(Controller Area Network,控制器局域网)是一种串行通信技术,专门用于在汽车电子控制单元(ECU)之间实现可靠的数据交换。 CAN协议介绍 电子化 汽车近年来的发展呈现出以电子化为主的特点。电子化的主…...
解决网页 H5 对接微信 JSSDK 后自定义分享和跳转APP等没效果
导致的原因 在聊天窗口直接点击一个文本链接,现在微信JSSDK已经不支持这样使用。 解决办法1 将文本链接生成一个二维码,然后微信扫码进入这个链接。 解决办法2 将这个文本链接收藏,然后从收藏打开这个链接。...

基于DeOldify的给黑白照片、视频上色
老照片常常因为当时的技术限制而只有黑白版本。然而现代的 AI 技术,如 DeOldify,可以让这些照片重现色彩。 本教程将详细介绍如何使用 DeOldify 来给老照片上色。 文章目录 准备工作执行代码图片上色视频上色 总结 准备工作 这里用 git clone 命令克隆…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
前端倒计时误差!
提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

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

如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...

七、数据库的完整性
七、数据库的完整性 主要内容 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实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中,群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS,在uniapp中实现: 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

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

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)
注:文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件: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、脚本参数化 …...