微信小程序坐标位置接口使用整理
微信小程序中实现更多地服务，可以使用腾讯地Api。
以下几个场景是使用地Api调用。
官方Api:微信小程序JavaScriptSDK|腾讯位置服务
微信小程序中使用腾讯地Api流程
登录腾讯地官网，申请秘钥
下载JavaScriptSDK,到项目中
小程序后台，域名白名单，设置request合法域名，添加https://apis.map.qq.com
项目中初始化，使用接口
//初始化
map = new QQMapWX({
key: 'PNYBZ-XNV36-X64SW-EALEI-2C63E-6MFNJ'
});指定位置附近“关键词”搜索
//指定位置附近“关键词”搜索
map.search({
keyword: '银行',
location: {
latitude: '36.656858',
longitude: '116.916358'
},
success: res => {
console.info(res);
}
});
逆解析，通过坐标获取，位置名称
//逆解析，通过坐标获取，位置名称
map.reverseGeocoder({
location: {
latitude: '36.656858',
longitude: '116.916358'
},
success: res => {
console.info(res);
}
});
解析，获取位置对应的坐标
//解析，获取位置对应的坐标，济南市槐荫区经十路乐梦中心3号楼3103室
map.geocoder({
address:'济南市槐荫区经十路乐梦中心3号楼3103室',
success:res=>{
console.info(res);
}
});
使用地，路线规划
//使用地图，路线规划
map.direction({
// mode: 'driving',
from: {
latitude: '36.656858',
longitude: '116.916358'
},
to: {
latitude: '36.440819',
longitude: '116.016219'
},
success: res => {
console.info(res);
}
});
注意：此处接口是获取规划路线的数据。如果想展示路线规划，请使用腾讯地小程序组件或者polyline坐标解压。
polyline坐标解压，展示路线到map组件：
//使用地图，路线规划
var _this = this;
map.direction({
// mode: 'driving',
from: {
latitude: '36.656858',
longitude: '116.916358'
},
to: {
latitude: '36.440819',
longitude: '116.016219'
},
success: res => {
console.info(res);
var coors = res.result.routes[0].polyline;
var mapPolyline = [];
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
mapPolyline.push({
latitude: coors[i],
longitude: coors[i + 1]
})
}
// console.info(mapPolyline);
_this.setData({
['polyline']:[{
points: mapPolyline,
color: '#00ff00',
width: 4
}]
});
}
});
this.setData({
mapinfo: {
latitude: '36.656858',
longitude: '116.916358'
}
});展示结果：
更多：
微信小程序坐标位置接口使用整理
微信小程序switch样式重写
小程序Image组件长按识别支持的码
文章为作者独立观点，不代表股票交易接口观点
相关文章
股民评论