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

 更新时间:2023年04月10日 09:06:56   作者:dancingwu  
使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息,下面这篇文章主要给大家介绍了关于VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)的相关资料,需要的朋友可以参考下

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')
            }
        })
    }
}

4、在需要引用的该方法

5、打印结果

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

总结

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

相关文章

  • Vue登录后添加动态路由并跳转的实践分享

    Vue登录后添加动态路由并跳转的实践分享

    这篇文章讲给大家详细介绍一下Vue如何实现登录后添加动态路由并跳转,文章通过代码示例介绍的非常详细,对我们的学习或工作有一定的的帮助,需要的朋友可以参考下
    2023-07-07
  • vue中的虚拟dom知识点总结

    vue中的虚拟dom知识点总结

    这篇文章主要介绍了vue中的虚拟dom知识点总结,文章围绕主题内容展开详细介绍,需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2022-04-04
  • vue中methods、mounted等的使用方法解析

    vue中methods、mounted等的使用方法解析

    这篇文章主要介绍了vue中methods、mounted等的使用方法解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 详解vue渲染从后台获取的json数据

    详解vue渲染从后台获取的json数据

    这篇文章主要介绍了详解vue渲染从后台获取的json数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Vue状态管理库Vuex的入门使用教程

    Vue状态管理库Vuex的入门使用教程

    Vuex是一个专门为Vue.js应用程序开发的状态管理库。它采用了一个集中式的架构,将应用程序的所有组件的状态存储在一个单独的地方。这使得状态的管理和维护变得更加容易
    2023-03-03
  • vue+Element实现搜索关键字高亮功能

    vue+Element实现搜索关键字高亮功能

    这篇文章主要为大家详细介绍了vue+Element实现搜索关键字高亮功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue3新拟态组件库开发流程之table组件源码分析

    vue3新拟态组件库开发流程之table组件源码分析

    这篇文章主要介绍了vue3新拟态组件库开发流程——table组件源码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue+Element实现登录随机验证码

    vue+Element实现登录随机验证码

    这篇文章主要为大家详细介绍了vue+Element实现登录随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue编译优化实现流程详解

    Vue编译优化实现流程详解

    编译优化指的是编译器将模板编译为渲染函数的过程中,尽可能多的提取关键信息,并以此指导生成最优代码的过程,优化的方向主要是区分动态内容和静态内容,并针对不同的内容采用不同的优化策略
    2023-01-01
  • vue打包更新packge.json版本号的全过程

    vue打包更新packge.json版本号的全过程

    这篇文章主要介绍了vue打包更新packge.json版本号的全过程,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-08-08

最新评论