uniapp H5高德地图获取当前位置

  • 开发文档 https://lbs.amap.com/api
  • 错误状态 https://lbs.amap.com/api/webservice/guide/tools/info/
  • 虽然用的高德但是你还需要申请一个腾讯地图的key来使用 getLocation API
  • https://uniapp.dcloud.io/collocation/manifest?id=h5sdkconfig
import amap from '@/static/lib/amap-wx.js'; // 只能用于小程序


      const amap_wx_key = '<微信key>';
      const amap_h5_key = '';

      let _key = '';
      // #ifdef H5
      _key = amap_h5_key

      uni.getLocation({
        success: function(pos) {
          uni.request({
            method: 'GET',
            url: 'https://restapi.amap.com/v3/geocode/regeo',
            data: {
              key: _key,
              location: `${pos.longitude},${pos.latitude}`,
              poitype: '城市',
            },
            success: ({
              data
            }) => {
              const city = data.regeocode.addressComponent.city
              commit('setCity', city)
              res(city);
            },
            fail: r => {
              console.log(r);
            }
          });
        }
      });
      // #endif

      // #ifdef MP-WEIXIN
      _key = amap_wx_key
      // 小程序需要配置 restapi.amap.com 为合法域名
      this.amapPlugin = new amap.AMapWX({
        key: _key
      });
      this.amapPlugin.getRegeo({
        success: data => {
          const city = data[0].regeocodeData.addressComponent.city;
          commit('setCity', city)
          res(city);
        },
        fail(e) {
          console.error(e);
          uni.showModal({
            title: e.errCode,
            content: e.errMsg,
          })
        }
      });
      // #endif

你可能感兴趣的:(uniapp H5高德地图获取当前位置)