微信小程序获取市,县,区地址

354 阅读1分钟

1.getLocation

先通过wx.getLocation 获取当前地址的经纬度
注意(

调用 wx.getLocation 来进行授权,使用此属性时应注意在App.json文件中进行配置


  "permission": {
    "scope.userLocation": {
      "desc": "   "//界面显示提示语句
    }
  },

)

2. 使用腾讯地图API把经纬度传上去返回城市名称

  1. 申请开发者密钥(key): 申请密钥

  2. 开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用->添加key-> 勾选WebServiceAPI -> 保存

    • 没有应用的创建一个应用,名字随便起
    • 添加key
    • 勾选WebServiceAPI
    • 确定
  3. 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1

  4. 安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加apis.map.qq.com、 第一种组件使用:(不推荐)

```
   // 引入SDK核心类,js文件根据自己业务,位置可自行放置
   var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
   var qqmapsdk;
       created() {
         qqmapsdk = new QQMapWX({
         key:'--------------------------'自己腾讯地图整的密钥
         })
         wx.getLocation({
        type: 'GCJ-02',
        success: (res) => {
          var latitude = res.latitude    // 获取经纬度
          var longitude = res.longitude
          qqmapsdk.reverseGeocoder({    // 使用腾讯地图进行逆推
            location: {
              latitude: latitude,
              longitude: longitude
            },
            success: (res) => {
              this.setData({
                city: res.result.address_component.city
              })
            }
          })
        }
       },
   ```

第二种应用函数(推荐)

```
   // 引入SDK核心类,js文件根据自己业务,位置可自行放置
   var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
   App({
      globalData: {
        shu:''
      },
       onLaunch() {
    const qqmapsdk =new QQMapWX({
      key:'--------------------------'自己腾讯地图整的密钥
    })
         wx.getLocation({
        type: 'GCJ-02',
        success: (res) => {
          var latitude = res.latitude    // 获取经纬度
          var longitude = res.longitude
          qqmapsdk.reverseGeocoder({    // 使用腾讯地图进行逆推
            location: {
              latitude: latitude,
              longitude: longitude
            },
            success: (res) => {
              this.globalDate.shu=res.address_component.city
            }
          })
        }
       },
   ```
   组件中
   const app=getApp()
   data:{
       address:''
   }
   ready(){
       this.setdata(){
       shu:this.data.address
       }
   }