腾讯位置服务
网址 : https://lbs.qq.com
- 逆地址解析可以实现位置
先读入门及使用限制
登录 - 手机号登录
- 申请开发者密钥(key):申请密钥
- 开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)- 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
下载JavaScriptSDK1.2;
SDK叫做应用程序开发工具包, JavaScriptSD是一个js脚本文件, 里面有很多js代码, 我们可以直接进行调用,然后直接操作腾讯位置服务- 安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com
-
小程序示例 - 简化官方文档
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js'); var qqmapsdk = new QQMapWX({ key: '申请的key' }); //这个是搜索位置,我们需要的是当前位置的城市名称 //使用逆地址解析 - 获取当前位置的逆地址解析 qqmapsdk.search({ keyword: '酒店', success: function (res) { console.log(res); }, // 逆地址解析用于通过经纬度,获取该位置的中文描述 qqmapsdk.reverseGeocoder({ success: function (res) { console.log(res); // 获取逆地址解析的结果 } })
实现首页左上角城市名称的显示
- 解压
JavaScriptSDK v1.2.zip
. 将qqmap-wx-jssdk.js
放入项目根目录下的/libs
文件夹下(如果没有则手动创建)。 - 在
onLoad
时,就需要加载左上角城市名称。
//index.js
page({
data:{
cityname:'', //用于绑定城市名称
},
loadCurrentCity(){
let QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
let qqmapsdk= new QQMapWX({
key: 'xxxxxxxxxxxxxxxx'
})
qqmapsdk.reverseGeocoder({
success: (res)=> {//成功后的回调
console.log("逆地址解析结果:",res);
let cityname = res.result.address_component.city;
console.log("逆解析地址:",cityname);
//箭头函数,不影响this指向问题
this.setData({cityname})
//将数据保存到全局
getApp().globalData.cityname=cityname
},
fail:(err)=>{
console.warn(err);
}
})
},
onLoad(){
this.loadCurrentCity();
},
onShow(){
// 获取globalData中的城市名称,更新左上角即可
let cityname = getApp().globalData.cityname
console.log('首页onShow获取城市:'+cityname)
this.setData({cityname})
}
})
//设置完成之后, 将缓存全部清除,然后重新编译
//会出现报错 - 去app.json中配置位置信息
"permission": {
"scope.userLocation": {
"desc": "赶紧给我地址,不然的话小心手机爆炸"
}
},
//app.js
App({
onLaunch: function () {
wx.cloud.init({
env: 'cloud1-3gb10u4tf5483bd9'
})
},
this.globalData:{
cityname:""
}
})
实现影院页面
// theatre.js
data: {
cityname:'',
moviesList:[]
},
onShow(){
//获取globalData.cityname
let cityname = getApp().globalData.cityname;
console.log(cityname)
this.setData({cityname})
//加载当前城市的影院列表
let QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
let qqmapsdk= new QQMapWX({
key: 'xxxxxxxxxxxxxxxxxxx'
})
qqmapsdk.search({
keyword:'电影院',
region:cityname,
//page_size:20, //每页20条,最多20条
success:(res)=>{
//默认10条
console.log('加载影院列表:',res)
//对res.data进行处理
res.data.forEach(item=>{
item._dis = (item._distance/1000).toFixed(2)
})
this.setData({moviesList:res.data})
}
})
},
<view class="item mb-line-b" wx:for="{{moviesList}}" wx:key="index">
<view class="title-block">
<view class="title line-ellipsis">{{item.title}}</view>
<view class="location-block">
<view class="flex line-ellipsis">{{item.address}}</view>
<view class="distance">{{item._dis}}km</view>
</view>
<view class="label-block">
<text class="allowRefund">电话:</text>
<text class="vipTag">{{item.tel?item.tel:'暂无'}}</text>
</view>
</view>
</view>