使用腾讯位置服务
腾讯位置服务（https://lbs.qq.com/）主要基于经纬度信息向开发者提供在线地理位置服务，支持多终端、多语言。官方网站提供了小程序端JS SDK，可以直接在小游戏开发中使用。
注意
小游戏与小程序的运行环境是相同的，前者是后者的一个特殊的类目分支，这意味着很多平台提供的小程序SDK小游戏也可以使用。
如何使用这个位置服务呢？
1）在https://lbs.qq.com/上注册开发者账号，查收邮件，按提示激活账号。
2）在密钥申请页面https://lbs.qq.com/dev/console/application/mine上创建一个名为“默认应用”（也可以用其他名字）的应用并申请一个密钥。“默认应用”的编辑面板如图1-6所示。
图1-6 “默认应用”的编辑面板
在面板中，一定要勾选“WebServiceAPI”复选框（这代表开通WebServiceAPI服务），并在域名白名单中添加微信服务域名（servicewechat.com）和QQ域名（qq.com）。小程序SDK需要用到WebServiceAPI的部分服务，这个选项是必选的，下面的“微信小程序”选项不是必选的。
3）通过网址https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip下载JS SDK并解压，将min版本保存至项目的src/libs目录下。
4）登录小程序管理后台设置安全域名，在开发→开发管理→开发设置→服务器域名中设置request合法域名，这里添加https://apis.map.qq.com。这项设置不是紧迫的，在微信开发者工具中，可以通过选择项目详细设置→本地设置，勾选“不校验合法域名”选项跳过这项校验。
准备工作做完了，接下来开始创建一个lbs_manager.js文件，用于实现LBS信息管理者模块，代码如代码清单1-12所示。
代码清单1-12 实现LBS信息管理者模块
这个文件做了什么？
❑第2行引入了腾讯位置服务的JS SDK。
❑第4行是从腾讯位置服务平台上复制下来的LBS服务密钥（QQ_LBS_KEY）。严格来讲，这个密钥属于机密信息，是不能放在前端的，应该放在后端。这里为了开发简便，直接放在这里了。
❑第12行使用密钥初始化QQMapJSSDK，以备后用。
❑第20行通过接口wx.getSetting查询用户的授权情况，如果已经授权，则直接调用#updateCity方法（第34行）；如果没有授权，则在第24行调用wx.authorize接口开始授权，地理位置授权窗口如图1-7所示。不同于scope.userInfo的信息授权，scope.userLocation这个授权请求不要求事先互动，可以直接发起。
图1-7 地理位置授权窗口
❑第41行先调用wx.getLocation接口拉取经纬度信息；取到以后，在第45行调用#qqmapsdk.reverseGeocoder方法查询当前用户所在的城市。前面我们在腾讯位置服务网站上注册账号、创建应用申请密钥、下载JS SDK，就是为了在这里调用这行代码。
❑第42行中的请求参数type可以取两个值：wgs84，返回GPS坐标；gcj02，返回可用于wx.openLocation的坐标。这些信息在官方文档上有详细描述。出于腾讯位置服务JS SDK的调用需要，这里选择gcj02。
❑第51行，返回的信息是一个JSON对象，里面有很多信息，这里只取城市这一项。
lbs_manager.js文件的代码写完了，接下来看如何使用。打开user_board_boxed.js文件（目前项目中用户记分板对象使用的是user_board_boxed.js文件，而不是user_board.js文件），内容如代码清单1-13所示。
代码清单1-13 user_board_boxed.js文件代码
这个文件做了什么？
❑第3行引入了LBS位置信息管理者实例。
❑第15行新增的代码代替了第14行，在原来的基础上添加了城市与用户昵称两项信息。
❑第25行添加了一个名称为city的getter，这个访问器是给子元素UserScoreText使用的。即使调用时lbsMgr没有初始化完成也没有关系，因为lbsMgr.city有默认值。
❑第29行添加了一个类属性nickName，这个属性是在第46行和第65行赋值的，userInfo对象中有这项信息，只是以前没有获取。在UserBoard类中，拉取UserInfo信息有两个渠道，设置nickName属性的代码也有两处。
代码修改完了，现在还不能测试。现在测试会出现一条关于权限的警告提示，如图1-8所示。
这条警告要我们在配置文件中声明permission字段。在小程序中配置文件是app.json，在小游戏中配置文件是位于项目根目录下的game.json。打开配置文件game.json，添加这样一项配置：
图1-8 关于权限的警告提示
第3～7行是新增代码，代表这个小游戏需要使用用户的地址信息。第5行的desc用于向用户描述请求地址权限的用意，这个描述在授权窗口中可以看到，如图1-7所示。
重新编译测试，城市名称绘制效果如图1-9所示。
在用户头像下方，依次绘制了用户城市、用户昵称和分数。
在编译测试腾讯位置服务时，可能会在调试区收到这样一条错误提示：
这是因为没有开启WebServiceAPI权限。前往腾讯位置服务网站，选择“应用管理”→“我的应用”选项，之后选择相关应用并单击“编辑”链接，勾选“WebServiceAPI”复选框，然后添加相关白名单域名即可，如图1-6所示。
图1-9 城市名称绘制效果
第一个白名单域名（servicewechat.com）是微信服务器的白名单域名，是为了让小游戏程序可以调用腾讯位置服务的API而设置的，第二个域名（qq.com）是为了在下面这个工具页面里测试密钥而设置的：https://lbs.qq.com/webservice_v1/guide-gcoder.html。
打开这个测试网址，在页面下方有一个嵌入的测试程序，将经纬度信息和密钥复制进去（见图1-10）就可以在线测试了。
图1-10 测试经纬度信息和密钥是否正确
如果参数有效，单击“运行”按钮，测试程序下方会有JSON数据返回。这个测试程序不仅能帮助我们验证密钥，还可以方便我们查看接口返回数据的信息结构。