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
        // 
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
  }
}

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

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

你可能感兴趣的