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

╰+攻爆jí腚メ 2024-04-17 20:43 14阅读 0赞

经纬度：

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

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

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

申请开发者密钥（key）：[申请密钥][Link 1]

下载微信小程序JavaScriptSDK，[微信小程序JavaScriptSDK v1.0][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=][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][https_blog.csdn.net_Magic_Ninja_article_details_81509545]

[Link 1]: https://lbs.qq.com/console/key.html
[JavaScriptSDK v1.0]: http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.0.zip
[http_apis.map.qq.com_ws_geocoder_v1_location_39.984154_116.307490_key]: http://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=
[https_blog.csdn.net_Magic_Ninja_article_details_81509545]: https://blog.csdn.net/Magic_Ninja/article/details/81509545