From 3f73960ef524fbe35fd37234f72646000137a4db Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Thu, 24 Feb 2022 17:48:55 +0800
Subject: [PATCH] +地图参与的弹窗
---
pages/grabOrders/map.vue | 104 +++++++++++++++++++++++++++++++++++++++-------------
store/state.js | 8 ++--
2 files changed, 82 insertions(+), 30 deletions(-)
diff --git a/pages/grabOrders/map.vue b/pages/grabOrders/map.vue
index f85080e..7a6bf0f 100644
--- a/pages/grabOrders/map.vue
+++ b/pages/grabOrders/map.vue
@@ -4,12 +4,13 @@
<!-- <u-button type="info" @click="acc">测试</u-button> -->
<!-- <web-view :src="urls" @message="message"></web-view> -->
<map :scale='18' id="myMap" style="width: 100%" :style="{height: mapHeight + 'px'}" :markers="markersCom"
- :longitude="longitude" :latitude="latitude" :circles="circlesCom" :polyline="mypolylinesCom"
+ :longitude="longitude" :latitude="latitude" :circles="circlesCom" :polyline="mypolylines"
show-location="true">
<cover-view class="dingwBut" @click="mapControlsBack">
<cover-image src="./map/img/dingwei.png" @click="mapControlsBack">
</cover-image>
</cover-view>
+
</map>
<view id="Umain" :style="{ height: activeHeight}" @touchstart="touchstart" @touchend="touchend"
@touchmove="touchmove">
@@ -93,16 +94,17 @@
{{ourData.num==ourData.jnum?"人数已满":'我参与'}}
</u-button>
</view>
- <u-popup v-model="showIn" mode="center" border-radius="14" z-index='1000001'>
- <view class="Info2">
- <view class="Info4">是否参加活动</view>
- <view class="Info3">
- <u-button type="primary" @click="openAPP('oks')">参加</u-button>
- <u-button type="error" @click="openAPP('nos')">取消</u-button>
- </view>
- </view>
- </u-popup>
+
</view>
+ <u-popup v-model="showIn" mode="bottom" border-radius="14" z-index='1000001' :mask-close-able="true">
+ <view class="Info2">
+ <view class="Info4">是否参加活动</view>
+ <u-button class="Info5" type="primary" @click="openAPP('oks')">参加</u-button>
+ <u-button class="Info5" type="error" @click="openAPP('nos')">取消</u-button>
+ <!--<view class="Info3">
+ </view> -->
+ </view>
+ </u-popup>
</view>
</template>
@@ -122,7 +124,21 @@
longitude: 115.8995839881188,
circles: [], //圆
markers: [], //标记点
- mypolylines: [],
+ mypolylines: [{ //指定一系列坐标点，从数组第一项连线至最后一项
+ points: [],
+ color: "#FE0000", //线的颜色
+ width: 10, //线的宽度
+ dottedLine: false, //是否虚线
+ arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
+ },
+ { //指定一系列坐标点，从数组第一项连线至最后一项
+ points: [],
+ color: "#10a4ff", //线的颜色
+ width: 10, //线的宽度
+ dottedLine: false, //是否虚线
+ arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
+ },
+ ],
useTime: null,
useTimeSet: null,
times: 3000,
@@ -154,6 +170,8 @@
mapControlsBack() {
// console.log(1111)
this.getLocationInfo("notSet");
+ // this.bye = false;
+ // this.timeBegin(1);
},
touchstart(e) {
// console.log(e.changedTouches[0].clientY)
@@ -321,6 +339,7 @@
}
} else {
this.showIn = true;
+ // this.openAPP('oks')
// this.$confirm('是否参与活动：' + this.ourData.rname + "?", '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
@@ -355,7 +374,8 @@
// }
// },
timeBegin(val) {
- console.log(this.bye)
+ // console.log(this.bye)
+ let that = this;
if (this.bye) {
console.log("再见")
if (that.useTime) {
@@ -368,10 +388,17 @@
}
return
}
- let that = this;
if (this.useTime) {
return
} else {
+ //加入自己的路线基础 索引1
+ // this.mypolylines[1] = { //指定一系列坐标点，从数组第一项连线至最后一项
+ // points: [],
+ // color: "#10a4ff", //线的颜色
+ // width: 10, //线的宽度
+ // dottedLine: false, //是否虚线
+ // arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
+ // }
if (val == 1) {
that.getLocationInfo();
}
@@ -403,7 +430,7 @@
});
},
getLocationInfo(val) {
- var that = this
+ var that = this;
uni.getLocation({
type: 'wgs84',
isHighAccuracy: true,
@@ -440,6 +467,24 @@
intlat: [res.longitude, res.latitude]
}
that.timeBeginSet(d) //30秒送数据
+ //加入绘制路线
+ let useDataPosition = {
+ latitude: res.latitude,
+ longitude: res.longitude
+ }
+ let lat = useDataPosition.latitude + '';
+ let long = useDataPosition.longitude + '';
+ let oldLat = that.mypolylines[1].points.length == 0 ? 1 : that.mypolylines[1].points[
+ that.mypolylines[1].points.length -
+ 1].latitude + '';
+ let oldLong = that.mypolylines[1].points.length == 0 ? 1 : that.mypolylines[1].points[
+ that.mypolylines[1].points.length -
+ 1].longitude + '';
+ if (lat != oldLat && long != oldLong) { //判断如果两次位置不一样 那就添加
+ that.mypolylines[1].points.push(useDataPosition);
+ }
+ // console.log(lat != oldLat && long != oldLong, 222222222222);
+ // console.log(that.mypolylines[1].points.length)
}
}
});
@@ -516,9 +561,10 @@
markersCom() {
return this.markers.slice(0);
},
- mypolylinesCom() {
- return this.mypolylines.slice(0);
- },
+ // mypolylinesCom() {
+ // // console.log(this.mypolylines,"333333333333333333333")
+ // return this.mypolylines.slice(0);
+ // },
socketValue() {
return this.$store.state.socketValue;
}
@@ -877,13 +923,14 @@
})
}
// setTimeout(() => {
- this.mypolylines[0] = { //指定一系列坐标点，从数组第一项连线至最后一项
- points: ourline,
- color: "#FE0000", //线的颜色
- width: 10, //线的宽度
- dottedLine: false, //是否虚线
- arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
- }
+ // this.mypolylines[0] = { //指定一系列坐标点，从数组第一项连线至最后一项
+ // points: ourline,
+ // color: "#FE0000", //线的颜色
+ // width: 10, //线的宽度
+ // dottedLine: false, //是否虚线
+ // arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
+ // }
+ that.mypolylines[0].points = ourline;
// console.log(this.mypolylines)
// }, 1000)
this.showWindow();
@@ -1008,8 +1055,8 @@
.Info2 {
- width: 200px;
- height: 100px;
+ width: 100%;
+ // height: 100px;
padding: 0 10px;
.Info3 {
@@ -1027,6 +1074,11 @@
text-align: center;
height: 50px;
}
+
+ .Info5 {
+ margin-bottom: 10px !important;
+ width: 70%;
+ }
}
.notOpens {
diff --git a/store/state.js b/store/state.js
index 9e30d60..f0ea1dc 100644
--- a/store/state.js
+++ b/store/state.js
@@ -7,10 +7,10 @@
useName: '过客',
},
logPath: '',
- //piAPI: apis.api,
+ piAPI: apis.api,
// piAPI: 'http://223.82.109.183:2082/api/',
- piAPI: 'http://192.168.0.110:83/',
- BaopiAPI: 'http://223.82.109.183:2080/api/',
+ // piAPI: 'http://192.168.0.110:83/',
+ BaopiAPI: 'http://223.82.109.183:2080/api/',
puserName: '',
puserID: '',
puserIphone: '',
@@ -53,4 +53,4 @@
...positions.state
}
-export default state
+export default state
\ No newline at end of file
--
Gitblit v1.9.3