parent
c2c0f195c9
commit
4b72ed472b
7 changed files with 125 additions and 106 deletions
@ -1,97 +1,131 @@ |
|||||||
<template> |
<template> |
||||||
<view style="width: 100%;height: 100vh;"> |
<view style="width: 100%;height: 100vh;"> |
||||||
<map :scale="scale" style="width: 100%; height: 100%;" :show-compass="true" |
<!-- |
||||||
:enable-overlooking="false" :enable-satellite="false" :enable-traffic="true" :show-location="true" |
show-compass 是否显示指南针 |
||||||
:latitude="latitude" :longitude="longitude" :markers="markers" > |
enable-overlooking 是否开启俯视 |
||||||
|
enable-satellite 是否开启卫星图 |
||||||
|
enable-traffic 是否开启实时路况 |
||||||
|
show-location 显示带有方向的当前定位点 |
||||||
|
latitude 经度 |
||||||
|
longitude 纬度 |
||||||
|
markers 标记点 |
||||||
|
--> |
||||||
|
<map :scale="scale" style="width: 100%; height: 100%;" :show-compass="true" :enable-overlooking="false" |
||||||
|
:enable-satellite="false" :enable-traffic="true" :show-location="true" :latitude="latitude" |
||||||
|
:longitude="longitude" :markers="markers"> |
||||||
</map> |
</map> |
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
export default { |
/* |
||||||
data() { |
markers 获取维修人员的位置信息 |
||||||
return { |
latitude和longitude 显示目的地的位置 |
||||||
scale: 12,//地图的缩放 5-18取值 |
*/ |
||||||
latitude: 30.64525,//蓝色点的位置---自己当前的位置 纬度 |
export default { |
||||||
longitude: 114.17240, //自己当 前位置的经度 |
data() { |
||||||
markers: [{ |
return { |
||||||
id: 1, |
scale: 16,//地图的缩放 5-18取值 |
||||||
latitude: 30.51242,//门店图片点的 纬度 |
latitude: 36.146504,//蓝色点的位置---自己当前的位置 纬度 |
||||||
longitude: 114.18055,//经度 |
longitude: 120.486065, //自己当 前位置的经度 |
||||||
height: 80,//图片的宽高 |
markers: [{ |
||||||
width: 80, |
id: 1, |
||||||
callout: { |
latitude: 36.146504,//门店图片点的 纬度 |
||||||
color: '#007AFF', // 文本颜色 |
longitude: 120.486065,//经度 |
||||||
bgColor: '#fff', // 背景色 |
height: 160,//图片的宽高 |
||||||
display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显 |
width: 160, |
||||||
fontSize: 15, |
callout: { |
||||||
textAlign: 'left', // 文本对齐方式。有效值: left, right, center |
color: '#007AFF', // 文本颜色 |
||||||
padding: 10, // 文本边缘留白 |
bgColor: '#fff', // 背景色 |
||||||
borderRadius: 5, |
display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显 |
||||||
content: '距离5km', |
fontSize: 15, |
||||||
}, |
textAlign: 'left', // 文本对齐方式。有效值: left, right, center |
||||||
|
padding: 10, // 文本边缘留白 |
||||||
iconPath: 'https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/house.jpg'//图 |
borderRadius: 5, |
||||||
}, ] |
content: '距离5km', |
||||||
}; |
}, |
||||||
}, |
|
||||||
methods: { |
iconPath: '/static/images/position/destination.png'//图 |
||||||
//计算距离的方法实现 |
|
||||||
rad(d) { |
|
||||||
return d * Math.PI / 180.0; |
|
||||||
}, |
}, |
||||||
// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度 |
{ |
||||||
getDistances(lat1, lng1, lat2, lng2) { |
id:2, |
||||||
var radLat1 = this.rad(lat1); |
latitude: 35.146504,//门店图片点的 纬度 |
||||||
var radLat2 = this.rad(lat2); |
longitude: 116.486065,//经度 |
||||||
var a = radLat1 - radLat2; |
height: 160,//图片的宽高 |
||||||
var b = this.rad(lng1) - this.rad(lng2); |
width: 160, |
||||||
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + |
callout: { |
||||||
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); |
color: '#007AFF', // 文本颜色 |
||||||
s = s * 6378.137; |
bgColor: '#fff', // 背景色 |
||||||
s = Math.round(s * 10000) / 10000; |
display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显 |
||||||
|
fontSize: 15, |
||||||
var distance = s; |
textAlign: 'left', // 文本对齐方式。有效值: left, right, center |
||||||
var distance_str = ""; |
padding: 10, // 文本边缘留白 |
||||||
|
borderRadius: 5, |
||||||
if (parseInt(distance) >= 1) { |
content: '距离5km', |
||||||
distance_str = distance.toFixed(2) + "km"; |
}, |
||||||
} else { |
|
||||||
distance_str = (distance * 1000).toFixed(2) + "m"; |
iconPath: '/static/images/position/weixiu.png'//图 |
||||||
} |
}] |
||||||
let objData = { |
}; |
||||||
distance: distance, |
}, |
||||||
distance_str: distance_str |
methods: { |
||||||
} |
//计算距离的方法实现 |
||||||
this.markers[0].callout.content = '距离您' + objData.distance_str |
rad(d) { |
||||||
|
return d * Math.PI / 180.0; |
||||||
|
}, |
||||||
|
// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度 |
||||||
|
getDistances(lat1, lng1, lat2, lng2) { |
||||||
|
console.log('计算距离',lat1, lng1, lat2, lng2) |
||||||
|
|
||||||
|
var radLat1 = this.rad(lat1); |
||||||
|
var radLat2 = this.rad(lat2); |
||||||
|
var a = radLat1 - radLat2; |
||||||
|
var b = this.rad(lng1) - this.rad(lng2); |
||||||
|
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; |
||||||
|
s = Math.round(s * 10000) / 10000; |
||||||
|
|
||||||
|
var distance = s; |
||||||
|
var distance_str = ""; |
||||||
|
|
||||||
|
if (parseInt(distance) >= 1) { |
||||||
|
distance_str = distance.toFixed(2) + "km"; |
||||||
|
} else { |
||||||
|
distance_str = (distance * 1000).toFixed(2) + "m"; |
||||||
|
} |
||||||
|
let objData = { |
||||||
|
distance: distance, |
||||||
|
distance_str: distance_str |
||||||
} |
} |
||||||
|
this.markers[0].callout.content = '距离您' + objData.distance_str |
||||||
}, |
}, |
||||||
mounted() { |
// 获取当前经纬度 |
||||||
let that = this |
getLocation() { |
||||||
//获取当前位置 |
// uni.getLocation({ |
||||||
uni.getLocation({ |
// type: 'wgs84', |
||||||
type: 'wgs84', |
// success: (res) => { |
||||||
geocode: true, //设置该参数为true可直接获取经纬度及城市信息 |
// this.latitude = res.latitude//当前位置 |
||||||
success: function(res) { |
// this.longitude = res.longitude |
||||||
console.log(res) |
this.markers[1].latitude = this.latitude+20//配送员位置 可调接口实时获取并且赋值 |
||||||
that.latitude = res.latitude//当前位置 |
this.markers[1].longitude = this.longitude+20 |
||||||
that.longitude = res.longitude |
// console.log('定位成功:', res,this.markers); |
||||||
that.markers[0].latitude = 30.51242//配送员位置 可调接口实时获取并且赋值 |
this.getDistances(this.markers[1].latitude, this.markers[1].longitude,this.markers[0].latitude, this.markers[0].longitude) |
||||||
that.markers[0].longitude = 114.18055 |
// }, |
||||||
}, |
// fail: (err) => { |
||||||
fail: function() { |
// this.error = err; |
||||||
uni.showToast({ |
// console.error('定位失败:', err); |
||||||
title: '获取地址失败，将导致部分功能不可用', |
// } |
||||||
icon: 'none' |
// }); |
||||||
}); |
|
||||||
} |
|
||||||
}); |
|
||||||
//调用计算距离方法 |
|
||||||
this.getDistances(30.64525, 114.17240, 30.51242, 114.18055) |
|
||||||
}, |
}, |
||||||
}; |
}, |
||||||
|
onload() { |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getLocation() |
||||||
|
}, |
||||||
|
}; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style scoped> |
<style scoped></style> |
||||||
|
|
||||||
</style> |
|
||||||
|
After Width: | Height: | Size: 993 B |
|
After Width: | Height: | Size: 661 B |
Loading…
Reference in new issue