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调用高德地图获取当前位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Element Plus组件Form表单Table表格二次封装的完整过程

    Element Plus组件Form表单Table表格二次封装的完整过程

    一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue项目两种方式实现竖向表格的思路分析

    vue项目两种方式实现竖向表格的思路分析

    这篇文章主要介绍了vue项目两种方式实现竖向表格的思路分析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • apache和nginx下vue页面刷新404的解决方案

    apache和nginx下vue页面刷新404的解决方案

    这篇文章主要介绍了apache和nginx下vue页面刷新404的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 关于vue 结合原生js 解决echarts resize问题

    关于vue 结合原生js 解决echarts resize问题

    这篇文章主要介绍了关于vue 结合原生js 解决echarts resize问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 详解Vue里循环form表单项实例

    详解Vue里循环form表单项实例

    本文主要介绍了Vue里循环form表单项实例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

    这篇文章主要介绍了Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),需要的朋友可以参考下
    2018-05-05
  • Vue.js中安装一个路由器demo

    Vue.js中安装一个路由器demo

    这篇文章主要为大家介绍了Vue.js中安装一个路由器demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 详解Nuxt.js部署及踩过的坑

    详解Nuxt.js部署及踩过的坑

    这篇文章主要介绍了详解Nuxt.js部署及踩过的坑,Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。本文主要说说服务端渲染应用部署,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • Vue为什么要谨慎使用$attrs与$listeners

    Vue为什么要谨慎使用$attrs与$listeners

    这篇文章主要介绍了Vue为什么要谨慎使用$attrs与$listeners,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Vue3实现图片放大镜效果

    Vue3实现图片放大镜效果

    这篇文章主要为大家详细介绍了Vue3实现图片放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论