Vue-amap 实现获取定位功能

最新推荐文章于 2024-07-23 15:55:45 发布

原创最新推荐文章于 2024-07-23 15:55:45 发布 · 3k 阅读

5 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

63 篇文章

订阅专栏

本文介绍了如何在HTML中引入高德地图插件，并展示了如何使用AMap.Geolocation进行实时定位。重点讲解了关键步骤、常见问题及官方示例链接。

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

注册账号并申请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('获取定位失败')
  }
})