Vue-amap 实现获取定位功能

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

• 常见问题
  温馨提示：Google浏览器调试过程中需要开启HTTPS服务，否则可能会出现一直定位失败的问题，详细解释参考官方详细说明
  官方定位示例链接
  官方常见问题链接