微信小程序 + 腾讯位置服务获取全国城市列表

目录

• • • • • • 一、注册登陆腾讯位置服务
          • 二、建立key（申请开发者密钥）
          • 三、下载微信小程序JavaScriptSDK
          • 四、配置微信小程序安全域名
          • 五、小程序代码示例
          • 六、小程序添加配置
          • 七、控制台查看调用结果

一、注册登陆腾讯位置服务

点击前往

二、建立key（申请开发者密钥）

【控制台】-【key管理】-【建立新密钥】

完成后要开通开通webserviceAPI服务

【控制台】-【 key管理】-【 设置】（使用该功能的key）-【勾选webserviceAPI】- 【保存】

小程序SDK须要用到webserviceAPI的部分服务，因此使用该功能的key须要具有相应的权限

三、下载微信小程序JavaScriptSDK

下载 微信小程序JavaScriptSDK v1.2 放入到你的小程序项目中

四、配置微信小程序安全域名

登陆微信小程序后台，添加 request 合法域名 https://apis.map.qq.com

五、小程序代码示例

// 引入SDK核心类，根据你的路径进行修改
var QQMapWX = require('../../static/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({ 
 
  
  /** * 页面的初始数据 */
  data: { 
 
  

  },

  /** * 生命周期函数--监听页面加载 */
  onLoad: function (options) { 
 
  
    // 实例化API核心类
    qqmapsdk = new QQMapWX({ 
 
  
      key: '你申请的 key 填入此处'
    });
  },

  /** * 生命周期函数--监听页面初次渲染完成 */
  onReady: function () { 
 
  

  },

  /** * 生命周期函数--监听页面显示 */
  onShow: function () { 
 
  
    var _this = this;
    //调用获取城市列表接口
    qqmapsdk.getCityList({ 
 
  
      success: function (res) { 
 
  //成功后的回调
        console.log(res);
      },
      fail: function (error) { 
 
  
        console.error(error);
      }
    });
  }
})

六、小程序添加配置

在 app.json 文件最后面添加

"permission": { 
 
  
    "scope.userLocation": { 
 
  
      "desc": "你的位置信息将用于小程序位置接口的效果展现"
    }
  }

七、控制台查看调用结果