首先在lbs.qq.com上注册自己的账号(因为腾讯位置服务需要由自己独立的key)。
再下载对应的微信小程序JavaScript SDK。一般像这种公共JavaScript文件都是放置在utils目录下
在页面的JavaScript文件里引入位置服务的SDK,使用自己创建的KEY进行初始化:
JavaScript
var qqmap = require("../../utils/qqmap-wx-jssdk.js");
var qqmapsdk = new qqmap({
key: '自己创建的key'
});
Page({
onLoad: function() {
},
// 搜索
search(e) {
const that = this;
qqmapsdk.getSuggestion({
keyword: e.detail.value.word,
success(res) {
console.log(res)
}
});
qqmapsdk.search({
keyword: e.detail.value.word,
success: function(res) {
if (res.data.length === 0) {
wx.showToast({
title: '暂无数据请更换关键词',
icon: '',
duration: 0,
mask: true,
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
} else {
console.log(res)
that.setData({
data: res.data
})
}
},
fail: function(res) {
wx.showModal({
title: '异常',
content: res.message,
showCancel: true,
cancelText: '取消',
cancelColor: '',
confirmText: '确定',
confirmColor: '',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
});
qqmapsdk.getCityList({
success(res) {
console.log(res)
}
});
},
onShow: function() {
var _this = this;
//调用获取城市列表接口
qqmapsdk.getCityList({
success: function(res) { //成功后的回调
console.log(res);
console.log('省份数据:', res.result[0])
var city = res.result[0];
//根据对应接口getCityList返回数据的Id获取区县数据(以北京为例)
qqmapsdk.getDistrictByCityId({
// 传入对应省份ID获得城市数据,传入城市ID获得区县数据,依次类推
id: "520000", //对应接口getCityList返回数据的Id,如:北京是'110000'
success: function(res) { //成功后的回调
console.log(res);
console.log('对应城市ID下的区县数据(以北京为例):', res.result[0]);
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
});
},
fail: function(error) {
console.error(error);
},
});
}
})
页面渲染
<!--index.wxml-->
<view class="container">
<form catchsubmit="search">
<input name="word" placeholder="请输入关键词"></input>
<button type="primary" formType="submit">搜索</button>
</form>
搜索结果:
<block wx:if="{{data}}" wx:for="{{data}}" wx:key="index">
<view class="item">
<view class="title">{{item.title}}</view>
<view class="address">{{item.address}}</view>
</view>
</block>
</view>
更多详细的功能,可以参考官方文档,这篇仅仅记录自己开始使用腾讯位置服务的开发笔记!
文章评论