vue3.0 使用高德地图获取经纬度信息

本来是打算使用微信地图来完成这个的。但是主管让必须使用高德地图来完成。这个移动端web可能真的没有高德地图大。引入一个比自己大的，也实属无奈。记录一下。还是更建议使用微信jssdk完成。

我这里没有加载地图的实体。因为用不到。只获取当前的经纬度就行了。

第一步

import AMapLoader from '@amap/amap-jsapi-loader';

这是高德地图推荐的npm方式。

第二步

import AMapLoader from '@amap/amap-jsapi-loader'
// 其他自己引入

export default defineComponent({
  setup () {
      AMapLoader.load({
        key: '9963f3d8ad9081a73f5a719cfbbe5acc',
        version: '1.4.15',
        plugins: ['AMap.Geolocation'],
        Loca: {
          version: '1.3.2'
        }
      }).then(AMap => {
        // const map = new AMap.Map('container') 
        // 这里也可以写实例，这边我用不到，如果用别忘了写 html
        // <div id="container" width="100" height="100" ></div>
        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 高精度开启
          radius: 10000,
          extensions: 'all'
        })

        geolocation.getCurrentPosition()
        AMap.event.addListener(geolocation, 'complete', onComplete)
        AMap.event.addListener(geolocation, 'error', onError)

        function onComplete (data: any) {
          console.log('data是具体的定位信息', data)
          console.log(data.position.lng)
          console.log(data.position.lat)
          // onLoad(lng, lat) 从这里调用你的接口
        }
        function onError (err: unknown) {
          // 定位出错
          console.log('定位失败', err)
        }
      }).catch((e) => {
        console.log(e)
      })

      const onLoad = (lat, lng) => {
        // ...
      }
  }
})

另外：pc上测试的话，需要开启https模式。
vue.congfig.js下

module.exports = {
  devServer: {
      https: true
  }
}

浏览器也要开启定位，就是域名前面的小锁或者叹号，点一下
网站设置->位置信息 开启一下

参考链接：
https://lbs.amap.com/api/jsap...
https://www.cnblogs.com/-roc/...
https://zhuanlan.zhihu.com/p/...