From e4368f71b89b9b275c22e562ad8b6ac0756cff47 Mon Sep 17 00:00:00 2001
From: zhangdi <15053473693@163.com>
Date: Tue, 19 Nov 2024 16:23:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E4=BD=8D=E7=BD=AE=E4=BF=AE?=
=?UTF-8?q?=E6=94=B9=E9=80=BB=E8=BE=91=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
pages/order/location.vue | 94 ++++++++++++++++++++++++++--------------
1 file changed, 61 insertions(+), 33 deletions(-)
diff --git a/pages/order/location.vue b/pages/order/location.vue
index 5010503..3882cb5 100644
--- a/pages/order/location.vue
+++ b/pages/order/location.vue
@@ -14,6 +14,18 @@
:enable-satellite="false" :enable-traffic="true" :show-location="true" :latitude="latitude"
:longitude="longitude" :markers="markers">
+
+
+
+
+ 维修人员：张三
+ 电话：15089098908
+
+ 距离您还有 {{ juli }}
+
+
+
+
@@ -21,51 +33,51 @@
/*
markers 获取维修人员的位置信息
latitude和longitude 显示目的地的位置
-*/
+*/
export default {
data() {
return {
+ juli: null,//距离
scale: 16,//地图的缩放 5-18取值
latitude: 36.146504,//蓝色点的位置---自己当前的位置 纬度
longitude: 120.486065, //自己当 前位置的经度
+ display: 'always',
markers: [{
id: 1,
latitude: 36.146504,//门店图片点的 纬度
longitude: 120.486065,//经度
- height: 160,//图片的宽高
- width: 160,
- callout: {
- color: '#007AFF', // 文本颜色
- bgColor: '#fff', // 背景色
- display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
- fontSize: 15,
- textAlign: 'left', // 文本对齐方式。有效值: left, right, center
- padding: 10, // 文本边缘留白
- borderRadius: 5,
- content: '距离5km',
+ iconPath: '/static/images/position/destination.png',//目的地
+ label: {
+ content: '标记133',
},
-
- iconPath: '/static/images/position/destination.png'//图
+ callout: {
+ content: '20',
+ color: '#fff',
+ fontSize: 14,
+ borderRadius: 4,
+ bgColor: '#2B73FF',
+ display: 'ALWAYS',
+ padding: 3,
+ anchorY: 5
+ }
},
{
- id:2,
+ id: 2,
latitude: 35.146504,//门店图片点的 纬度
longitude: 116.486065,//经度
- height: 160,//图片的宽高
- width: 160,
+ iconPath: '/static/images/position/weixiu.png',//维修人员
+ display: 'ALWAYS',
callout: {
- color: '#007AFF', // 文本颜色
- bgColor: '#fff', // 背景色
- display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
- fontSize: 15,
- textAlign: 'left', // 文本对齐方式。有效值: left, right, center
- padding: 10, // 文本边缘留白
- borderRadius: 5,
- content: '距离5km',
+ content: '标记25',
+ color: '#ffffff',
+ fontSize: 14,
+ borderRadius: 4,
+ bgColor: '#3cc51f',
+ display: "ALWAYS",
},
- iconPath: '/static/images/position/weixiu.png'//图
- }]
+
+ }],
};
},
methods: {
@@ -75,7 +87,7 @@ export default {
},
// 根据经纬度计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
getDistances(lat1, lng1, lat2, lng2) {
- console.log('计算距离',lat1, lng1, lat2, lng2)
+ console.log('计算距离', lat1, lng1, lat2, lng2)
var radLat1 = this.rad(lat1);
var radLat2 = this.rad(lat2);
@@ -98,7 +110,8 @@ export default {
distance: distance,
distance_str: distance_str
}
- this.markers[0].callout.content = '距离您' + objData.distance_str
+ // this.markers[0].callout.content = '距离您' + objData.distance_str
+ this.juli = objData.distance_str
},
// 获取当前经纬度
getLocation() {
@@ -107,10 +120,10 @@ export default {
// success: (res) => {
// this.latitude = res.latitude//当前位置
// this.longitude = res.longitude
- this.markers[1].latitude = this.latitude+20//配送员位置 可调接口实时获取并且赋值
- this.markers[1].longitude = this.longitude+20
+ this.markers[1].latitude = this.latitude + 20//配送员位置 可调接口实时获取并且赋值
+ this.markers[1].longitude = this.longitude + 20
// console.log('定位成功:', res,this.markers);
- this.getDistances(this.markers[1].latitude, this.markers[1].longitude,this.markers[0].latitude, this.markers[0].longitude)
+ this.getDistances(this.markers[1].latitude, this.markers[1].longitude, this.markers[0].latitude, this.markers[0].longitude)
// },
// fail: (err) => {
// this.error = err;
@@ -128,4 +141,19 @@ export default {
};
-
\ No newline at end of file
+
\ No newline at end of file