你还在为小程序中地址逆向解析发愁吗?
你还在为小程序中路线规划,地点搜索发愁吗?
好消息!好消息!
腾讯地图官方开始对小程序中位置应用提供支持了!!!(得有一段时间了,最近才发现)
赞呀,再也不用写有关位置的接口让小程序调用了!
目录
1. 没有官方支持时的调用
2. 有了官方支持时的调用
1
没有官方支持时的调用
在没有官方支持时,小程序中的位置获取,可以采用腾讯地图,高德地图,百度地图都可以,但是你需要先通过小程序的wx.getLocation 获取当前的经纬度,然后再借助第三方地图提供的webservice API ,自己在后端实现一个根据经纬度获取当前位置的接口,然后供小程序调用。
图1 腾讯地图的webservice api 接口
要想获得两个经纬度点时,你可以手动自己写一个获取经纬度距离的函数,代码如下:
// 方法定义 lat,lng
function GetDistance( lat1, lng1, lat2, lng2){
var radLat1 = lat1*Math.PI / 180.0;
var radLat2 = lat2*Math.PI / 180.0;
var a = radLat1 - radLat2;
var b = lng1*Math.PI / 180.0 - lng2*Math.PI / 180.0;
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
s = s *6378.137 ;// EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
return s;
}
// 调用 return的距离单位为km
console.log(GetDistance(22.54605355,114.02597366,22.620315,114.144802));
也可自己调用第三方地图的webservice API 实现自己的服务接口,如图2 腾讯地图webservice API 计算两个经纬度的距离。
如图2 腾讯地图webservice API 计算两个经纬度的距离
2
有了官方支持时的调用
最近需要做小程序的地址解析和计算距离,查看
腾讯地图开放平台时,发现平台已经支持小程序中的使用了,如图3。
图 3 腾讯位置服务支持在小程序中使用
而且调用非常简单:只需要引入他的一个JS 文件,就可以使用了,如图4腾讯位置在小程序中的应用。
图4 腾讯位置服务在小程序中的应用
具体调用实例如下:
var QQMapWX = require('../../mapsdk/qqmap-wx-jssdk.js');
var qqmapsdk;
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
lat_dest:'目标纬度',
lng_dest:'目标经度',
location_info:{},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
qqmapsdk = new QQMapWX({
key: '自己申请一个腾讯位置服务的key'
});
},
bindLocationInput:function(e){
var that = this;
// 逆向解析
qqmapsdk.reverseGeocoder({
location: '', //获取表单传入的位置坐标,不填默认当前位置,示例为string格式
//get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数
success: function(res) {//成功后的回调
if(res.status==0){
let locationInfo = {}
locationInfo.province = res.result.address_component.province;
locationInfo.city = res.result.address_component.city;
locationInfo.district = res.result.address_component.district;
locationInfo.location_name = locationInfo.province+locationInfo.city+locationInfo.district+res.result.formatted_addresses.recommend;
console.log(locationInfo.lat_dest+','+locationInfo.lng_dest);
that.setData({location_info:locationInfo});
// 计算位置
qqmapsdk.calculateDistance({
from: '', //若起点有数据则采用起点坐标,若为空默认当前地址
to: that.data.lat_dest+','+that.data.lng_dest, //终点坐标
success: function(res) {//成功后的回调
var distance = res.result.elements[0].distance;
console.log('distance==',distance);
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
});
that.setData({report_info:locationInfo});
}else{
return app.Tips({title:'请重试!'});
}
},
fail: function (res) {
return app.Tips({title:'请重试!'});
},
complete: function (res) {
// console.log(res);
}
});
},
})
3
总结
具体使用中,建议多看文档。
END