微信小程序通过startLocationUpdate,onLocationChange获取当前地理位置信息,配合腾讯地图解析获取到地址

先创建个getLocation.js文件

复制代码
//获取用户当前所在的位置
const getLocation = () => {
    return new Promise((resolve, reject) => {
        let _locationChangeFn = (res) => {
            resolve(res) // 回传地里位置信息
            wx.offLocationChange(_locationChangeFn) // 关闭实时定位
            wx.stopLocationUpdate(_locationChangeFn); // 关闭监听 不关闭监听的话,有时获取位置时会非常慢
        }
        wx.startLocationUpdate({
            success: (res) => {
                wx.onLocationChange(_locationChangeFn)
            },
            fail: (err) => {
                // 重新获取位置权限
                wx.openSetting({
                    success(res) {
                        res.authSetting = {
                            "scope.userLocation": true
                        }
                    }
                })
                reject(err)
            }
        })
    })
}

module.exports = {
    getLocation
}

在App.vue文件里引入封装的getLocation.js文件

复制代码
<script>
import getLocation from "./pages/common/getLocation.js";
import { addUserTrail } from "@/api/promote.js";
var QQMapWX = require("./common/qqmap-wx-jssdk.js");//引入腾讯地图逆解析地址
var qqmapsdk;
export default {
  data() {
    return {
        latitude:'',
        longitude:''
    };
  },
  onLaunch: function () {
    setInterval(function () {//定时任务判断登录的角色在调用getLocation.js
      if (uni.getStorageSync("ROLE_NAME") !== null &&
        uni.getStorageSync("ROLE_NAME") !== "" &&
        uni.getStorageSync("ROLE_NAME") === "BD") {
        getLocation.getLocation().then((res) => {
          console.log('当前所在位置的经纬度为:')
          console.log(res.latitude,res.longitude)
          const addUserTrailBody = {
            latitude: null,
            longitude: null,
            address: "",
          };
          addUserTrailBody.latitude = res.latitude;
          addUserTrailBody.longitude = res.longitude;
          addUserTrail(addUserTrailBody);
        });
      }
    }, 90000);
  },

  methods: {
    getMapAddress() {
      const that = this;
      const tMap = new QQMapWX({
        key: "xxx", //腾讯地图开发者密钥key
      });
      uni.getLocation({
        type: "wgs84",
        isHighAccuracy: true,
        success: (res) => {
          console.log(res);
        },
        fail: () => {
          console.log("获取经纬度失败");
        },
          complete: () => {
          tMap.reverseGeocoder({//逆解析
            location: {
              latitude: that.latitude,
              longitude: that.longitude,
            },
            success: function (res) {
              console.log("解析地址成功", res);
              console.log("当前地址:", res.result.address);
              const addUserTrailBody = {//拿到地理位置传递下
                latitude: null,
                longitude: null,
                address: "",
              };
              addUserTrailBody.latitude = res.latitude;
              addUserTrailBody.longitude = res.longitude;
              addUserTrailBody.address = res.address;
              addUserTrail(addUserTrailBody);
              uni.setStorage({
                key: "local",
                data: res.result.address,
                success() {
                  console.log("用户地址信息已缓存");
                },
              });
            },
            fail: function (res) {
              uni.showToast({
                title: "定位失败",
                duration: 2000,
                icon: "none",
              });
              console.log(res);
            },
            complete: function (res) {
              //无论成功失败都会执行
              console.log("获取定位信息");
              return;
              uni.openLocation({
                latitude: that.latitude,
                longitude: that.longitude,
                success: function () {
                  console.log("success");
                },
              });
            },
          });
        },
      });
    },    
  },
};
</script>

要在manifest.json文件里配置下内容

复制代码
"permission": {
    "scope.userLocation": {
    "desc": "你的位置信息将用于定位效果展示"
    }
},
"requiredPrivateInfos": [
   "getLocation",
    "onLocationChange",
    "startLocationUpdate",
    "chooseLocation"
],
    "requiredBackgroundModes": [
        "location"
]
相关推荐
说私域2 小时前
社群招募文案的核心构建要点与工具赋能路径——基于AI智能名片链动2+1模式商城小程序的实践研究
人工智能·小程序·私域运营
_ZeroKing4 小时前
自制智能门锁:NFC 刷卡 + 小程序远程开锁(完整实战记录)
嵌入式硬件·小程序·notepad++·arduino
郑州光合科技余经理4 小时前
可独立部署的Java同城O2O系统架构:技术落地
java·开发语言·前端·后端·小程序·系统架构·uni-app
阿斌_bingyu7096 小时前
眼镜店AR在线试戴小程序技术解决方案
小程序·ar
计算机毕设指导67 小时前
基于微信小程序的智能停车场管理系统【源码文末联系】
java·spring boot·微信小程序·小程序·tomcat·maven·intellij-idea
2501_933907217 小时前
如何选择西安优质小程序开发服务与本凡码农合作?
科技·微信小程序·小程序
说私域7 小时前
破局互联网产品开发困境:开源AI智能名片链动2+1模式S2B2C商城小程序的实践与启示
人工智能·小程序·开源·私域运营
宁夏雨科网1 天前
文具办公用品小程序商城,开发一个难吗
小程序·商城小程序·文具小程序·文具商城
说私域1 天前
开源链动2+1模式商城小程序在深度分销数字化转型中的应用研究
人工智能·小程序·开源·流量运营·私域运营
咖啡の猫1 天前
微信小程序案例 - 自定义 tabBar
微信小程序·小程序·notepad++