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

最新推荐文章于 2025-03-21 09:32:30 发布

奶溶咖啡糖

最新推荐文章于 2025-03-21 09:32:30 发布

阅读量8.3k

点赞数 2

分类专栏： Vue 文章标签： vue 定位 js javascript

本文链接：https://blog.csdn.net/qq_43574079/article/details/111597318

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文档详细介绍了如何从高德开放平台获取地图API密钥，并将其集成到Web项目中的步骤。包括创建密钥、引入脚本、封装方法以及如何在项目中调用这些方法来实现地理位置定位等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

地址：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({
                // 是否使用高精度定位，默认：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')
            }
        })
    }
}