1.先去腾讯地图申请key,传送门
2.下载微信小程序JavaScriptSDK,
3.在小程序引入,
在上一页面取得两地的经纬度,
小程序代码
wxml
<map
id="myMap"
style="width: 100%; height: 1500rpx;"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale='{{scale}}'
polyline="{{polyline}}"
markers="{{markers}}"
show-compass
>
</map>
js
var QQMapWX = require('./utils/qqmap-wx-jssdk.min.js');
var util=require('./utils/util.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: ''
});
Page({
/**
* 页面的初始数据
*/
data: {
latitude:'',
longitude:'',//地图显示坐标
markers:[],//地图标注
scale:16,//地图缩放尺寸
polyline: [],//路线
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options);
let startLat = options.startLat;//起点纬度
let startLng = options.startLng;//起点经度
let destLat = options.destLat;//终点纬度
let destLng = options.destLng;//终点经度
var that = this;
//调用距离计算接口
wx.showLoading({
title: '加载中',
})
qqmapsdk.direction({
mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
//from参数不填默认当前地址
from: {
latitude: startLat,
longitude: startLng
},
to: {
latitude: destLat,
longitude: destLng
},
policy: 'REAL_TRAFFIC', //结合路况的最优方式
success: function (res,data) {
// console.log('返回结果--', res);
// console.log('返回结果22--', data);
//计算缩放比例
let distance = data[0].distance/1000;
console.log(distance);
if (distance>500){
var scale=4;
} else if (distance>200){
var scale = 7;
} else if (distance > 100){
var scale = 9;
}else{
var scale = 12;
}
var ret = res;
var coors = ret.result.routes[0].polyline, pl = [];
//坐标解压(返回的点串坐标,通过前向差分进行压缩)
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) {
pl.push({ latitude: coors[i], longitude: coors[i + 1] })
}
// console.log('--',pl);
//查看是否you途径站
wx.request({
url: util.baseurl +'Index/getWaystation',
data:{
station:pl,
startLat: startLat,
startLng: startLng,
destLat: destLat,
destLng: destLng,
},
method:"post",
success:function(res){
wx.hideLoading();
console.log('路线坐标---', res);
let oil=res.data;//加油站坐标
//设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
that.setData({
latitude: pl[0].latitude,
longitude: pl[0].longitude,
polyline: [{
points: pl,
color: '#4AC37A',
borderColor: '#000',
width: 10,
arrowLine: true,
borderWidth: 6
}],
scale: scale,
markers: oil
})
}
})
},
fail: function (error) {
wx.hideLoading();
console.error(error);
},
complete: function (res) {
console.log(res);
}
});
},
})
php代码
//根据经纬度查询途径站(2公里以内)
public function getWaystation(){
$param=$this->request->param();
// echo "<pre>";
// var_dump($param);
$oilSearch=input('oilSearch','');//油品搜索
//marker地图标记
$result=array([
'id'=>0,
'latitude'=>$param['startLat'],
'longitude'=>$param['startLng'],
'iconPath'=>'../../../images/start.png',
'width'=>20,
'height'=>30,
],[
'id'=>1,
'latitude'=>$param['destLat'],
'longitude'=>$param['destLng'],
'iconPath'=>'../../../images/dest.png',
'width'=>20,
'height'=>30,
]);
//查询加油站
$where['m.create_time']=['<=',time()];
$where['m.expire_time']=['>=',time()];
$res=db('mechanism')
->alias('m')
->join('jy_user_admin u','m.id=u.mid')
->where(array('is_admin'=>1,'m.status'=>1))
->where($where)
->field('m.id,m.latitude,m.longitude,m.name,m.address')
->select();
//查看每个坐标点两公里以内是否有加油站
foreach ($param['station'] as $k=>$v){
foreach ($res as $res_k=>$res_v){
$distance=$this->distance($v['latitude'],$v['longitude'],$res_v['latitude'],$res_v['longitude']);
if($distance<=2){
//油品搜索
$arr=0;
if($oilSearch){//油品搜索
$oil_price=db('oil_price')->where(['p_mid'=>$res_v['id'],'p_oid'=>$oilSearch])->field('p_price,p_oid,p_mid')->order('p_price desc')->select();
foreach ($oil_price as $price_k=>$price_v){
if($res_v['id']==$price_v['p_mid']){
$arr=1;
break;
}
}
if(count($oil_price)>1){
$price=end($oil_price)['p_price'].'/L~'.reset($oil_price)['p_price'].'/L';
}else{
$price=reset($oil_price)['p_price'].'/L';
}
if($arr==1){
$oil=[
'id'=>$res_v['id'],
'latitude'=>$res_v['latitude'],
'longitude'=>$res_v['longitude'],
'iconPath'=>'../../../images/oil.png',
'width'=>28,
'height'=>28,
'callout'=> [
'content'=> $res_v['name']."\n".'¥'.$price,
'color'=> '#000',
'display'=> 'BYCLICK',
"padding"=>10
]
];
array_push($result,$oil);
}
}else{
$oil_price=db('oil_price')->where('p_mid',$res_v['id'])->field('p_price')->order('p_price desc')->select();
if(count($oil_price)>1){
$price=end($oil_price)['p_price'].'/L~'.reset($oil_price)['p_price'].'/L';
}else{
$price=reset($oil_price)['p_price'].'/L';
}
$oil=[
'id'=>$res_v['id'],
'latitude'=>$res_v['latitude'],
'longitude'=>$res_v['longitude'],
'iconPath'=>'../../../images/oil.png',
'width'=>28,
'height'=>28,
'callout'=> [
'content'=> $res_v['name']."\n".'¥'.$price,
'color'=> '#000',
'display'=> 'BYCLICK',
"padding"=>10
]
];
array_push($result,$oil);
}
}
}
}
return json($result);
}
//计算路线与加油站之间的距离
public function distance($locallat,$locallng,$oillat,$oillng){
//计算用户当前位置与加油站之间的距离
$r = 6378.137; // 地球半径
$radLat1 = $this->rad($locallat);//当前纬度
$radLat2 = $this->rad($oillat);//加油站纬度
$lat = $radLat1 - $radLat2;
$long = $this->rad($locallng) - $this->rad($oillng);
$s = 2 * asin(sqrt(pow(sin($lat/2), 2) + cos($radLat1)*cos($radLat2)*pow(sin($long/2), 2)));
$s = $s * $r;
$distance=round($s * 10) / 10;
//返回公里
return $distance;
}
over