From 178be3f7a5c36338ee8f2587502fa9a9f059ea8c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 25 Feb 2022 09:04:30 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/qfqk-android
---
pages/grabOrders/map.vue | 390 ++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 314 insertions(+), 76 deletions(-)
diff --git a/pages/grabOrders/map.vue b/pages/grabOrders/map.vue
index 8dc5174..7a6bf0f 100644
--- a/pages/grabOrders/map.vue
+++ b/pages/grabOrders/map.vue
@@ -4,9 +4,17 @@
<!-- <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"
- show-location="true"></map>
- <view id="Umain">
+ :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">
+ <view :class="['activeTip',activeTip?'isOpens':'notOpens'] " :style="{height:'30px'}"></view>
<view class="once-b">
任务详情
</view>
@@ -86,21 +94,22 @@
{{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>
<script>
- import $moveWindow from "./map/js/move.js"
+ import $moveUniAppMap from "./map/js/moveUniAppMap.js"
export default {
data() {
return {
@@ -110,11 +119,26 @@
rid: '',
webV: null,
wv: null,
+ mapHeight: 0,
latitude: 28.687205773173343,
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,
@@ -129,9 +153,44 @@
},
bye: true,
types: '', //android?
+ moveDom: null, //移动实体类
+ activeHeight: "auto ", //活动高度 默认自动
+ afterClass: {},
+ activeTip: false, //是否展开
+
+ mapControls: [{
+ id: "1",
+ position: 20,
+ iconPath: "/static/tabbar/addSelectedIcon.png",
+ clickable: true,
+ }], //地图控件
}
},
methods: {
+ mapControlsBack() {
+ // console.log(1111)
+ this.getLocationInfo("notSet");
+ // this.bye = false;
+ // this.timeBegin(1);
+ },
+ touchstart(e) {
+ // console.log(e.changedTouches[0].clientY)
+ if (this.moveDom) {
+ this.moveDom.ListenerTouchstart(e)
+ }
+ },
+ touchmove(e) {
+ // console.log(e.changedTouches[0].clientY)
+ if (this.moveDom) {
+ this.moveDom.ListenerTouchmove(e)
+ }
+ },
+ touchend(e) {
+ // console.log(e.changedTouches[0].clientY)
+ if (this.moveDom) {
+ this.moveDom.ListenerTouchend(e)
+ }
+ },
openAPP(type) {
let that = this;
if (type == "oks") {
@@ -260,7 +319,7 @@
// }
// })
let d = {
- rid:rid,
+ rid: rid,
serid: serid,
type: type,
// data: JSON.stringify(item),
@@ -280,6 +339,7 @@
}
} else {
this.showIn = true;
+ // this.openAPP('oks')
// this.$confirm('是否参与活动：' + this.ourData.rname + "?", '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
@@ -314,7 +374,8 @@
// }
// },
timeBegin(val) {
- console.log(this.bye)
+ // console.log(this.bye)
+ let that = this;
if (this.bye) {
console.log("再见")
if (that.useTime) {
@@ -327,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();
}
@@ -361,8 +429,8 @@
latitude: a,
});
},
- getLocationInfo() {
- var that = this
+ getLocationInfo(val) {
+ var that = this;
uni.getLocation({
type: 'wgs84',
isHighAccuracy: true,
@@ -370,13 +438,8 @@
// console.log(res, "当前位置");
that.latitude = res.latitude
that.longitude = res.longitude
- console.log(that.latitude)
- console.log(that.longitude)
- let d = {
- id: that.ourData.id,
- intlat: [res.longitude, res.latitude]
- }
- that.timeBeginSet(d) //30秒送数据
+ // console.log(that.latitude)
+ // console.log(that.longitude)
that.map.moveToLocation({
latitude: res.latitude,
longitude: res.longitude
@@ -398,6 +461,31 @@
radius: 10, //半径
strokeWidth: 2 //描边的宽度
}]
+ if (val != "notSet") {
+ let d = {
+ id: that.ourData.id,
+ 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)
+ }
}
});
},
@@ -473,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;
}
@@ -510,7 +599,55 @@
onReady() {
let that = this;
- this.types = uni.getSystemInfoSync().platform;
+ this.types = uni.getSystemInfoSync();
+
+ var animation = uni.createAnimation({
+ duration: 1000,
+ timingFunction: 'linear',
+ })
+
+ this.animation = animation;
+
+ let activeHeight = 0;
+ this.getDom("#Umain", (res) => {
+ // console.log(res, 1111111111111111111111111111)
+ that.mapHeight = that.types.windowHeight - res.height + 30;
+ // that.mapHeight = 30;
+ that.activeHeight = res.height;
+ activeHeight = res.height;
+ let minHeight = 4 * 40 + 30
+ let d = {
+ activeDom: "#Umain",
+ adaptDom: "#myMap",
+ uni: uni,
+ maxHeight: activeHeight, //在外面获取活动区域的高度，
+ //在构造中动态获取会实时改变这个值
+ //导致改变固定的最高高度
+ useHeight: minHeight, //缩小后的高度、、可设置成保留高度
+ critical: (activeHeight - minHeight) / 3, //收缩程度，，可设置成总滑动距离的1/2 (maxHeight - useHeight) / 2
+ fn: (res) => {
+ // console.log(res)
+ if (res.state != 'on') {
+ that.mapHeight = that.types.windowHeight - res.height + 30;
+ } else {
+ if (res.translate) {
+ that.activeTip = true;
+ }
+ if (res.translate) {
+ that.activeTip = false;
+ }
+ }
+
+ if (res.translate === true) {
+ that.activeTip = true;
+ } else if (res.translate === false) {
+ that.activeTip = false;
+ }
+ that.activeHeight = res.height + 'px';
+ }
+ }
+ that.moveDom = new $moveUniAppMap(d);
+ })
// if (type == "android") {
// this.useHeight = "calc(100vh - 40px)";
// }
@@ -557,7 +694,7 @@
// data = JSON.stringify({
datas = {
appenUrl: "http://192.168.0.108:83/",
- butCT: "beginUp",
+ butCT: "begin",
buttype: 0,
captain: "我",
city: "南昌市",
@@ -605,12 +742,18 @@
toStrings(d);
}
toStrings(datas);
- console.log(data)
+ // console.log(data)
if (data.team) {
data["teams"] = data.team.split(",");
}
that.ourData = data;
+
+ uni.getSystemInfo({ //初始化地图高度
+ success(res) {
+ that.mapHeight = res.windowHeight;
+ }
+ });
// console.log(data);
// return
// console.log(options.html)
@@ -654,31 +797,31 @@
// }
that.query = uni.createSelectorQuery();
const _this = this;
- uni.getSystemInfo({
- success: (res) => {
- // _this.mapHeight = (res.screenHeight - res.statusBarHeight) /2
- // setTimeout(() => {
- // that.getDom('#Umain', data => {
- // console.log(res.statusBarHeight, res.screenHeight, data, 'dat')
- // console.log(res.screenHeight - data.height + res
- // .statusBarHeight)
- // _this.mapHeight = res.screenHeight - res.statusBarHeight - 420
- that.mapHeight = res.screenHeight - res.statusBarHeight - 466
- that.mapHeight = that.mapHeight
- // })
- // }, 1000)
+ // uni.getSystemInfo({
+ // success: (res) => {
+ // // _this.mapHeight = (res.screenHeight - res.statusBarHeight) /2
+ // // setTimeout(() => {
+ // // that.getDom('#Umain', data => {
+ // // console.log(res.statusBarHeight, res.screenHeight, data, 'dat')
+ // // console.log(res.screenHeight - data.height + res
+ // // .statusBarHeight)
+ // // _this.mapHeight = res.screenHeight - res.statusBarHeight - 420
+ // that.mapHeight = res.screenHeight - res.statusBarHeight - 466
+ // that.mapHeight = that.mapHeight
+ // // })
+ // // }, 1000)
- // that.query.select('#Umain').boundingClientRect(data => {
- // console.log('11111111')
- // console.log(data)
- // }).exec();
- // console.log(res)
- // let info = uni.createSelectorQuery().select("Umain");
- // info.boundingClientRect(function(data) { //data - 各种参数
- // console.log(data.width) // 获取元素宽度
- // }).exec()
- }
- })
+ // // that.query.select('#Umain').boundingClientRect(data => {
+ // // console.log('11111111')
+ // // console.log(data)
+ // // }).exec();
+ // // console.log(res)
+ // // let info = uni.createSelectorQuery().select("Umain");
+ // // info.boundingClientRect(function(data) { //data - 各种参数
+ // // console.log(data.width) // 获取元素宽度
+ // // }).exec()
+ // }
+ // })
// console.log(document.getElementById("Umain"))
// this.checkDomHeightId({
// domName: "getElementById",
@@ -759,10 +902,10 @@
//画线
- console.log(data)
+ // console.log(data)
let line = data.line.split("(")[1].split(")")[0].split(",");
- console.log(line[0].split(" ")[1])
- console.log(line[0].split(" ")[0])
+ // console.log(line[0].split(" ")[1])
+ // console.log(line[0].split(" ")[0])
this.latitude = line[0].split(" ")[1];
this.longitude = line[0].split(" ")[0];
this.map.moveToLocation({
@@ -780,14 +923,15 @@
})
}
// setTimeout(() => {
- this.mypolylines[0] = { //指定一系列坐标点，从数组第一项连线至最后一项
- points: ourline,
- color: "#FE0000", //线的颜色
- width: 10, //线的宽度
- dottedLine: false, //是否虚线
- arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
- }
- console.log(this.mypolylines)
+ // 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();
// this.getLocationInfo(data);
@@ -804,18 +948,18 @@
<style lang="scss">
.content {
- flex: 1;
- height: 100%;
+ // flex: 1;
+ // height: 100%;
+ overflow: hidden;
+ // position: relative;
}
#Umain {
position: absolute;
- width: 100%;
- height: auto;
- left: 0;
bottom: 0;
- background-color: #e8e8e8;
- z-index: 1000000;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
}
.once {
@@ -911,8 +1055,8 @@
.Info2 {
- width: 200px;
- height: 100px;
+ width: 100%;
+ // height: 100px;
padding: 0 10px;
.Info3 {
@@ -930,5 +1074,99 @@
text-align: center;
height: 50px;
}
+
+ .Info5 {
+ margin-bottom: 10px !important;
+ width: 70%;
+ }
+ }
+
+ .notOpens {
+ &::after {
+ content: "";
+ display: block;
+ width: 20px;
+ height: 4px;
+ background-color: rgba(202, 202, 202, 1);
+ position: absolute;
+ top: 10px;
+ left: calc(50% - 10px);
+ border-radius: 5px;
+ transition: all 0.1s;
+ }
+ }
+
+ .activeTip {
+ background-color: #fff;
+ }
+
+ .isOpens {
+ &::after {
+ content: "";
+ display: block;
+ width: 13px;
+ height: 4px;
+ background-color: rgba(202, 202, 202, 1);
+ position: absolute;
+ top: 10px;
+ left: calc(50% - 12px);
+ border-radius: 5px;
+ transform: rotate(30deg);
+ transition: all 0.1s;
+ }
+
+ &::before {
+ content: "";
+ display: block;
+ width: 13px;
+ height: 4px;
+ background-color: rgba(202, 202, 202, 1);
+ position: absolute;
+ top: 10px;
+ left: calc(50% - 4px);
+ border-radius: 5px;
+ transform: rotate(-30deg);
+ transition: all 0.1s;
+ }
+ }
+
+ .dingwBut {
+ width: 80upx;
+ height: 80upx;
+ background-color: #fff;
+ border-radius: 20upx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ bottom: 40upx;
+ right: 40upx;
+
+ // background-color: red;
+ // .dingwButImg {
+ // width: 80%;
+ // height: 80%;
+ // }
+ // .icon{
+ // }
+ // &::after{
+ // content: url(map/img/dingwei.png);
+ // }
+ // .dingwButImg {
+ // animation: mymove 5s infinite;
+ // animation-timing-function: linear;
+ // }
+ }
+
+
+
+ @keyframes mymove {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(1turn);
+ }
}
</style>
--
Gitblit v1.9.3