Vue-amap 实现获取定位功能

codezha

墨衍会员 · AI 创作全网分发码龄10年

关注

原创最新推荐文章于 2026-09-01 12:08:08 发布 3.1k 阅读 AI 写同款· GEO 优化 ›

高德地图开发（二、地图控件）高德地图开发（二、地图控件）地图控件（地图控件、3D罗盘等）如何加载阅读详情

注册账号并申请key

高德开发平台

引入

public目录下index.html中通过src引入插件

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxx"></script>

使用

let AMap = window.AMap
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,
   panToLocation: 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)
       if (data.formattedAddress) {
           console.log(data.formattedAddress)
       } else {
         console.log('获取定位失败')
       }
   }
   function onError(data) {
       // 定位出错
       console.log('获取定位失败')
  }
})