uni-app 小程序项目获取地理位置

- 日理万妓 2023-06-24 08:24 25阅读 0赞

> uni-app 小程序项目无法直接获取到地理位置，只能通过获取到的经纬度，调用第三方地图Api获取。

1.  在 manifest.json - 微信小程序配置 - 填写微信小程序AppID、选择位置接口，填写申请原因  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]
2.  选择第三方地图Api，因为是做小程序，这里选择[腾讯地图][Link 1]
3.  注册、登陆后，在控制台 - key管理中创建秘钥 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]
4.  引入腾讯地图Api
5.  授权调用已经封装好的方法，获取经纬度解析出地理位置信息
6.  如果用户未授权，默认会执行fail回调，所以添加提示框进行重新授权确认

/** * @Author: licheng * @Date: 2019/12/21 6:06 下午 * @Description: */
    import QQMapWX from "../static/js/qqmap-wx-jssdk.min.js";
    
    const getCity = () => { 
      return new Promise((resolve, reject) => { 
        // 获取授权信息
        uni.getSetting({ 
          success: res => { 
            // console.log(res);
            if (res.authSetting && res.authSetting.hasOwnProperty("scope.userLocation")) { 
              if (res.authSetting["scope.userLocation"]) { 
                getCityInfo();
              } else { 
                uni.showModal({ 
                  title: "提示",
                  content: "请重新授权获取你的地理位置，否则部分功能将无法使用",
                  success: (res) => { 
                    if (res.confirm) { 
                      uni.openSetting({ 
                        success: () => getCityInfo()
                      });
                    } else { 
                      reject("请授权获取你的地理位置，否则部分功能将无法使用！");
                    }
                  },
                });
              }
            } else { 
              getCityInfo();
            }
          }
        });
    
        // 获取地理位置信息
        const getCityInfo = () => { 
          // 腾讯地图Api
          const qqmapsdk = new QQMapWX({  key: "这里填写腾讯地图的秘钥" });
          // 授权
          uni.authorize({ 
            scope: "scope.userLocation",
            success: () => { 
              uni.getLocation({ 
                type: "gcj02", // wgs84: 返回GPS坐标，gcj02: 返回国测局坐标
                success: res => { 
                  const { latitude, longitude} = res;
                  const location = { latitude, longitude};
                  qqmapsdk.reverseGeocoder({ 
                    location,
                    success: res => resolve(res.result)
                  });
                }
              });
            },
            fail: () => reject("请授权获取你的位置，否则部分功能将无法使用！"),
          });
        };
      });
    };
    
    export default getCity;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191222083625488.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M=,size_16,color_FFFFFF,t_70
[Link 1]: https://lbs.qq.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191222083022773.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M=,size_16,color_FFFFFF,t_70