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

本文已获得【腾讯位置服务开发应用征文大赛】最具影响力奖，感谢CSDN及各位小伙伴一直以来的支持与厚爱！

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！

一、探新境、知未解、创未来

邀请您前往注册 腾讯位置服务。

二、创建 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": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

七、控制台查看调用结果

腾讯位置服务全面拥抱小程序生态，从服务API、基础地图组件、插件、行业方案等多个层面服务不同场景需求的小程序开发者，助力小程序插上地图的“翅膀”！

立即接入 >>>

微信小程序 JavaScript SDK 官方文档 >>>

腾讯位置服务开发QQ交流群：958296564