微信小程序 使用腾讯地图SDK详解及实现步骤
近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案，拿来给大家分享一下！
使用起来非常简单，就是一些功能还有待完善。
官方文档：http://lbs.qq.com/qqmap_wx_jssdk/index.html
步骤：
- 申请开发者密钥（key）：申请密匙
- 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
- 安全域名设置，需要在微信公众平台添加域名地址https://apis.map.qq.com
- 小程序示例
调用接口
qqmapsdk.search({
keyword: '彩票',success: function (res) {
console.log(res);
},fail: function (res) {
console.log(res);
},complete: function (res) {
console.log(res);
}
});
})
结果效果图：
去购彩.png
5.核心类
5.1 地点搜索search(options:Object)
通过关键词keyword搜索周边poi，比如“酒店”“餐饮”“娱乐”“学校”等
去购彩界面的实现：
5.1.1 buy.js
调用接口
qqmapsdk.search({
keyword: '彩票', page_size: 20, success: function (res) {
console.log(res);
var resData = res.data;
for (var i = 0; i < resData.length; i++) {
resData[i]._distance = util.formatDistance(resData[i]._distance);//转换一下距离的格式
}
that.setData({resData: resData});
}, fail: function(res) {
console.log(res);
}, complete: function(res) {
console.log(res);
}
})
}
})
<div class="jb51code">
<pre class="brush:js;">
// utils/util.js
/**
- 将距离格式化
- <1000m时 取整,没有小数点
-
1000m时 单位取km,一位小数点
*/
function formatDistance(num) {
if (num < 1000) {
return num.toFixed(0) + 'm';
} else if (num > 1000) {
return (num / 1000).toFixed(1) + 'km';
}
}
