微信小程序之获取当前位置信息

最新推荐文章于 2025-06-06 22:05:16 发布

原创最新推荐文章于 2025-06-06 22:05:16 发布 · 478 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

13 篇文章

订阅专栏

经纬度：

wx.getLocation({
    success: rse => {
      console.log(rse.latitude, rse.longitude)
    }
  })

使用腾讯位置服务获取城市名:

利用腾讯地图SDK，使用逆地址解析，具体请看SDK

申请开发者密钥（key）：申请密钥

下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0

安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

//根据经纬度获取城市名称
    wx.getLocation({
      success: rse => {
        console.log("haha"+rse.latitude)
        //开始添加代码
        //调用接口
        this.qqmapsdk.reverseGeocoder({
          location: {
            latitude: rse.latitude,
            longitude: rse.longitude
          },
          success: res => {
            console.log("haha" + rse.latitude)
            let city = res.result.address_component.city
            console.log(city) //打印城市名称
          },
          fail:res=>{
            console.log("fail")
          }
        })
      }
    })

配置sdk

在项目目录建立一个文件夹libs

然后把解压之前下载的SDK里面的qqmap-wx-jssdk.js文件复制进去

在目标.js中创建一个常数变量

const QQMapWX = require(
  '../../libs/qqmap-wx-jssdk.js'
  )

在onload中创建一个

this.qqmapsdk = new QQMapWX({
  key: 'IC7BZ-J3SW4-YMDU7-D6LQU-XXXXX-XXXXX'
})

如果没出现就进入这个网址http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=
等于后面加上自己的key看看能不能返回数据。

这里补充一下，需要在app.json中补充下面的permission

"permission": {
    "scope.userLocation": {
      "desc": "我想获取你的位置"
    }
  },

主要内容提取自https://blog.csdn.net/Magic_Ninja/article/details/81509545