You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.9 KiB
97 lines
2.9 KiB
1 year ago
|
<template>
|
||
|
|
<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"
|
||
|
|
:latitude="latitude" :longitude="longitude" :markers="markers" >
|
||
|
|
</map>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
scale: 12,//地图的缩放 5-18取值
|
||
|
|
latitude: 30.64525,//蓝色点的位置---自己当前的位置 纬度
|
||
|
|
longitude: 114.17240, //自己当 前位置的经度
|
||
|
|
markers: [{
|
||
|
|
id: 1,
|
||
|
|
latitude: 30.51242,//门店图片点的 纬度
|
||
|
|
longitude: 114.18055,//经度
|
||
|
|
height: 80,//图片的宽高
|
||
|
|
width: 80,
|
||
|
|
callout: {
|
||
|
|
color: '#007AFF', // 文本颜色
|
||
|
|
bgColor: '#fff', // 背景色
|
||
|
|
display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
|
||
|
|
fontSize: 15,
|
||
|
|
textAlign: 'left', // 文本对齐方式。有效值: left, right, center
|
||
|
|
padding: 10, // 文本边缘留白
|
||
|
|
borderRadius: 5,
|
||
|
|
content: '距离5km',
|
||
|
|
},
|
||
|
|
|
||
|
|
iconPath: 'https://zpkoss.oss-cn-shenzhen.aliyuncs.com/newsys/dms_app/logo/house.jpg'//图
|
||
|
|
}, ]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//计算距离的方法实现
|
||
|
|
rad(d) {
|
||
|
|
return d * Math.PI / 180.0;
|
||
|
|
},
|
||
|
|
// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
|
||
|
|
getDistances(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
|
||
|
|
//获取当前位置
|
||
|
|
uni.getLocation({
|
||
|
|
type: 'wgs84',
|
||
|
|
geocode: true, //设置该参数为true可直接获取经纬度及城市信息
|
||
|
|
success: function(res) {
|
||
|
|
console.log(res)
|
||
|
|
that.latitude = res.latitude//当前位置
|
||
|
|
that.longitude = res.longitude
|
||
|
|
that.markers[0].latitude = 30.51242//配送员位置 可调接口实时获取并且赋值
|
||
|
|
that.markers[0].longitude = 114.18055
|
||
|
|
},
|
||
|
|
fail: function() {
|
||
|
|
uni.showToast({
|
||
|
|
title: '获取地址失败，将导致部分功能不可用',
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//调用计算距离方法
|
||
|
|
this.getDistances(30.64525, 114.17240, 30.51242, 114.18055)
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|