在微信小程序中如何使用腾讯地图SDK？
发布时间：2017-04-05 13:49 来源：www.ushendu.com
大家知道在微信小程序中如何使用腾讯地图SDK吗？是不是很多小伙伴都在使用微信小程序呢？今天小编给大家带来的就是在微信小程序中使用腾讯地图SDK的详细步骤，想要了解的朋友就跟小编一起来看看吧。
步骤：
申请开发者密钥（key）：申请密匙
下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDKv1.0
安全域名设置，需要在微信公众平台添加域名地址
小程序示例
//引入SDK核心类
varQQMapWX=require('../../libs/qqmap-wx-jssdk.js');
varqqmapsdk;
Page({
onLoad:function(){
//实例化API核心类
qqmapsdk=newQQMapWX({
key:'申请的key'
});
},
onShow:function(){
//调用接口
qqmapsdk.search({
keyword:'彩票',
success:function(res){
console.log(res);
},
fail:function(res){
console.log(res);
},
complete:function(res){
console.log(res);
}
});
})
结果效果图：
去购彩.png
核心类
5.1地点搜索search(options:Object)
通过关键词keyword搜索周边poi，比如“酒店”“餐饮”“娱乐”“学校”等
去购彩界面的实现：
5.1.1buy.js
//引入腾讯地图SDK核心类
varQQMapWX=require('../../utils/qqmap-wx-jssdk.js');
varutil=require("../../utils/util.js");
varqqmapsdk;
Page({
data:{
resData:[]
},
onLoad:function(options){
//实例化腾讯地图API核心类
qqmapsdk=newQQMapWX({
key:'HPNBZ-B426V-CZQPP-UN4R6-QYOF2-MYFU3'//此处使用你自己申请的key
});
},
onShow:function(){
varthat=this;
//腾讯地图调用接口
qqmapsdk.search({
keyword:'彩票',
page_size:20,
success:function(res){
console.log(res);
varresData=res.data;
for(vari=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);
}
})
}
})
//utils/util.js
/**
*将距离格式化
*<1000m时取整,没有小数点
*>1000m时单位取km,一位小数点
*/
functionformatDistance(num){
if(num<1000){
returnnum.toFixed(0)+'m';
}elseif(num>1000){
return(num/1000).toFixed(1)+'km';
}
}
5.1.2buy.wxml主要样式采用weui
<viewclass="page">
<viewwx:for="{{resData}}"wx:key="shop"class="page__bd">
<viewbindtap="navTo"data-item="{{item}}">
<viewclass="weui-panel">
<viewclass="weui-panel__bd">
<viewclass="weui-media-boxweui-media-box_text">
<viewclass="weui-media-box__titleweui-media-box__title_in-text">{{item.title}}</view>
<viewclass="weui-media-box__desc">{{item.address}}</view>
<viewclass="weui-media-box__info">
<viewclass="weui-media-box__info__meta">电话：{{item.tel}}</view>
<viewclass="weui-media-box__info__metaweui-media-box__info__meta_extra">距离：{{item._distance}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
5.2关键词输入提示getSuggestion(options:Object)
用于获取输入关键字的补完与提示，帮助用户快速输入。
示例：
//调用接口
qqmapsdk.getSuggestion({
keyword:'技术',
success:function(res){
console.log(res);
},
fail:function(res){
console.log(res);
},
complete:function(res){
console.log(res);
}
});
5.3距离计算calculateDistance(options:Object)
计算一个点到多点的步行、驾车距离。
示例：
//调用接口
qqmapsdk.calculateDistance({
mode:'walking';//步行，驾车为'driving'
to:[{
latitude:39.984060,
longitude:116.307520
},{
latitude:39.984572,
longitude:116.306339
}],
success:function(res){
console.log(res);
},
fail:function(res){
console.log(res);
},
complete:function(res){
console.log(res);
}
});
5.4另外还有以下功能，就不一一演示了。
getCityList(options:Object)：获取全国城市列表数据；
getDistrictByCityId(options:Object)：通过城市ID返回城市下的区县；
reverseGeocoder(options:Object)：用于获取输入关键字的补完与提示，帮助用户快速输入
geocoder(options:Object)：提供由地址描述到所述位置坐标的转换，与逆地址解析reverseGeocoder()的过程正好相反。
今天的内容就和大家介绍到这里了，想要了解更多精彩内容请继续关注u深度每日更新！小编等着你哦！
