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


    先创建个getLocation.js文件

    1. //获取用户当前所在的位置
    2. const getLocation = () => {
    3. return new Promise((resolve, reject) => {
    4. let _locationChangeFn = (res) => {
    5. resolve(res) // 回传地里位置信息
    6. wx.offLocationChange(_locationChangeFn) // 关闭实时定位
    7. wx.stopLocationUpdate(_locationChangeFn); // 关闭监听 不关闭监听的话,有时获取位置时会非常慢
    8. }
    9. wx.startLocationUpdate({
    10. success: (res) => {
    11. wx.onLocationChange(_locationChangeFn)
    12. },
    13. fail: (err) => {
    14. // 重新获取位置权限
    15. wx.openSetting({
    16. success(res) {
    17. res.authSetting = {
    18. "scope.userLocation": true
    19. }
    20. }
    21. })
    22. reject(err)
    23. }
    24. })
    25. })
    26. }
    27. module.exports = {
    28. getLocation
    29. }

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

    1. <script>
    2. import getLocation from "./pages/common/getLocation.js";
    3. import { addUserTrail } from "@/api/promote.js";
    4. var QQMapWX = require("./common/qqmap-wx-jssdk.js");//引入腾讯地图逆解析地址
    5. var qqmapsdk;
    6. export default {
    7. data() {
    8. return {
    9. latitude:'',
    10. longitude:''
    11. };
    12. },
    13. onLaunch: function () {
    14. setInterval(function () {//定时任务判断登录的角色在调用getLocation.js
    15. if (uni.getStorageSync("ROLE_NAME") !== null &&
    16. uni.getStorageSync("ROLE_NAME") !== "" &&
    17. uni.getStorageSync("ROLE_NAME") === "BD") {
    18. getLocation.getLocation().then((res) => {
    19. console.log('当前所在位置的经纬度为:')
    20. console.log(res.latitude,res.longitude)
    21. const addUserTrailBody = {
    22. latitude: null,
    23. longitude: null,
    24. address: "",
    25. };
    26. addUserTrailBody.latitude = res.latitude;
    27. addUserTrailBody.longitude = res.longitude;
    28. addUserTrail(addUserTrailBody);
    29. });
    30. }
    31. }, 90000);
    32. },
    33. methods: {
    34. getMapAddress() {
    35. const that = this;
    36. const tMap = new QQMapWX({
    37. key: "xxx", //腾讯地图开发者密钥key
    38. });
    39. uni.getLocation({
    40. type: "wgs84",
    41. isHighAccuracy: true,
    42. success: (res) => {
    43. console.log(res);
    44. },
    45. fail: () => {
    46. console.log("获取经纬度失败");
    47. },
    48. complete: () => {
    49. tMap.reverseGeocoder({//逆解析
    50. location: {
    51. latitude: that.latitude,
    52. longitude: that.longitude,
    53. },
    54. success: function (res) {
    55. console.log("解析地址成功", res);
    56. console.log("当前地址:", res.result.address);
    57. const addUserTrailBody = {//拿到地理位置传递下
    58. latitude: null,
    59. longitude: null,
    60. address: "",
    61. };
    62. addUserTrailBody.latitude = res.latitude;
    63. addUserTrailBody.longitude = res.longitude;
    64. addUserTrailBody.address = res.address;
    65. addUserTrail(addUserTrailBody);
    66. uni.setStorage({
    67. key: "local",
    68. data: res.result.address,
    69. success() {
    70. console.log("用户地址信息已缓存");
    71. },
    72. });
    73. },
    74. fail: function (res) {
    75. uni.showToast({
    76. title: "定位失败",
    77. duration: 2000,
    78. icon: "none",
    79. });
    80. console.log(res);
    81. },
    82. complete: function (res) {
    83. //无论成功失败都会执行
    84. console.log("获取定位信息");
    85. return;
    86. uni.openLocation({
    87. latitude: that.latitude,
    88. longitude: that.longitude,
    89. success: function () {
    90. console.log("success");
    91. },
    92. });
    93. },
    94. });
    95. },
    96. });
    97. },
    98. },
    99. };
    100. </script>

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

    1. "permission": {
    2. "scope.userLocation": {
    3. "desc": "你的位置信息将用于定位效果展示"
    4. }
    5. },
    6. "requiredPrivateInfos": [
    7. "getLocation",
    8. "onLocationChange",
    9. "startLocationUpdate",
    10. "chooseLocation"
    11. ],
    12. "requiredBackgroundModes": [
    13. "location"
    14. ]

  • 相关阅读:
    c++实现建造者模式
    QML地图Map中使用QPainterPath,并显示任意点经纬度位置
    Bytebase 2.20.0 - 支持为工单事件配置飞书个人通知
    计算日期到天数转换
    照亮夜晚的台灯:户外空间的闪亮之选
    研究了 babel.config.js 和 babelrc,理解了为什么ES6代码没被转化
    Meta Quest Pro拆解:集成度更高,设计更复杂
    猿创征文 | 基于H5实现跨文档通信 & websocket
    皕杰报表在tomcat的server.xml中配置了什么?
    【第38篇】MixConv:混合深度卷积核
  • 原文地址:https://blog.csdn.net/m0_60153106/article/details/134052595