位置: IT常识 - 正文

VUE中调用高德地图获取当前位置（VUE2.0和3.0通用）(vue3使用高德地图)

编辑：rootadmin

VUE中调用高德地图获取当前位置（VUE2.0和3.0通用）

推荐整理分享VUE中调用高德地图获取当前位置（VUE2.0和3.0通用）(vue3使用高德地图)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue调用高德地图实现导航,vue调用高德地图实现实时导航,vue调用高德地图实现实时导航,vue调用高德地图api,vue调用高德地图实现导航,vue调用高德地图,vue调用高德地图实现导航,vue调用高德地图的gps定位,内容如对您有帮助，希望把文章链接给更多的朋友！

标签： Vue vue 定位 js javascript

1、去高德开放平台获取高德地图KEY VUE中调用高德地图获取当前位置（VUE2.0和3.0通用）(vue3使用高德地图)

地址：https://lbs.amap.com/

注意：这里一定要选择WEB端的KEY，不要选择WEB服务的KEY，否则拿不到数据

2、去项目中引入KEY，也就是CDN，在这里我们在SRC下面创建一个UNTI文件夹，然后在到文件夹下面创建一个名为UNTI.JS的文件3、在UNTI.JS中写入我们的方法封装

注意：这里之所以不在INDEX.HTML中引入，是因为如果在INDEX.HTML引入，汇报AMAP NOT UNDEFINED或者是找不到

export default function MapLoader() {let aMapScript = document.createElement('script')aMapScript.setAttribute('src', 'https://webapi.amap.com/maps?v=1.4.11&key=c0af2a8bee25c16d7a307124ddb43056&plugin=AMap.CitySearch')document.head.appendChild(aMapScript)return aMapScript.onload = function() {AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true,// 设置定位超时时间，默认：无穷大timeout: 10000,// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)buttonOffset: new AMap.Pixel(10, 20),// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true,// 定位按钮的排放位置, RB表示右下buttonPosition: 'RB'})geolocation.getCurrentPosition()AMap.event.addListener(geolocation, 'complete', onComplete)AMap.event.addListener(geolocation, 'error', onError)function onComplete(data) {// data是具体的定位信息console.log(data)console.log('123123')}function onError(data) {console.log(data)// 定位出错console.log('123123s')}})}}4、在需要引用的该方法5、打印结果

一个简单、但是稳定性稍差的方法

版权

本文链接地址:https://www.jiuchutong.com/zhishi/295259.html 转载请保留说明！

上一篇：ST电机库v5.4.4源代码分析(1): FOC原理(结合ST电机库)(st的电机库性能怎么样呢)

下一篇：vue引用public目录下文件(vue引入文件路径@的意思)