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 命令克隆…...

【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...

页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...

12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1: 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置: // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

WPF八大法则:告别模态窗口卡顿
⚙️ 核心问题:阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程,导致后续逻辑无法执行: var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题:…...
CppCon 2015 学习:Simple, Extensible Pattern Matching in C++14
什么是 Pattern Matching(模式匹配) ❝ 模式匹配就是一种“描述式”的写法,不需要你手动判断、提取数据,而是直接描述你希望的数据结构是什么样子,系统自动判断并提取。❞ 你给的定义拆解: ✴ Instead of …...