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

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

文章图片

本文目录

- - - - 本文已获得【腾讯位置服务开发应用征文大赛】最具影响力奖，感谢CSDN及各位小伙伴一直以来的支持与厚爱！
      - 一、探新境、知未解、创未来
      - 二、创建 Key（申请开发者密钥）
      - （一）【控制台】-【key管理】-【创建新密钥】，按提示申请开发者密钥。
        
        （二）完成后要开通开通 webserviceAPI 服务。
      - 三、下载微信小程序 JavaScriptSDK
      - 四、配置微信小程序安全域名
      - 五、小程序代码示例
      - 六、小程序添加配置
      - 七、控制台查看调用结果

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图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