我的编程空间,编程开发者的网络收藏夹
学习永远不晚

VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)

1、去高德开放平台获取高德地图KEY

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

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

2、去项目中引入KEY,也就是CDN,在这里我们在class="lazy" data-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('class="lazy" data-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({
                // 是否使用高精度定位,默认:true
                enableHighAccuracy: true,
                // 设置定位超时时间,默认:无穷大
                timeout: 10000,
                // 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20),
                //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
                zoomToAccuracy: 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、打印结果

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

总结

到此这篇关于VUE中如何调用高德地图获取当前位置的文章就介绍到这了,更多相关VUE调用高德地图获取当前位置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)

使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息,下面这篇文章主要给大家介绍了关于VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)的相关资料,需要的朋友可以参考下
2023-05-15

VUE中怎么调用高德地图获取当前位置

这篇文章主要介绍“VUE中怎么调用高德地图获取当前位置”,在日常操作中,相信很多人在VUE中怎么调用高德地图获取当前位置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”VUE中怎么调用高德地图获取当前位置”的疑
2023-07-06

HTML5页面直接调用百度地图API如何获取当前位置直接导航目的地

这篇文章主要介绍了HTML5页面直接调用百度地图API如何获取当前位置直接导航目的地,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。我是应用在微信中,自定义菜单,菜单直接链接到
2023-06-09

编程热搜

目录