From c51caf4a8622f35200f926d01d270d138299738f Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Thu, 24 Feb 2022 14:46:21 +0800
Subject: [PATCH] +地图优化 添加可收缩详情面板，添加定位按钮
---
static/map/dingwei.png | 0
pages/grabOrders/map.vue | 270 ++++++++++++++++++++++++++++++++------
pages/grabOrders/map/js/moveUniAppMap.js | 128 ++++++++++++++++++
pages/grabOrders/map/img/dingwei.png | 0
4 files changed, 355 insertions(+), 43 deletions(-)
diff --git a/pages/grabOrders/map.vue b/pages/grabOrders/map.vue
index 8dc5174..629183e 100644
--- a/pages/grabOrders/map.vue
+++ b/pages/grabOrders/map.vue
@@ -5,8 +5,15 @@
<!-- <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">
+ show-location="true">
+ <cover-view class="dingwBut" @click="mapControlsBack">
+ <cover-image :class="[beginFindDW?'dingwButImg':'']" 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>
@@ -100,7 +107,7 @@
</template>
<script>
- import $moveWindow from "./map/js/move.js"
+ import $moveUniAppMap from "./map/js/moveUniAppMap.js"
export default {
data() {
return {
@@ -110,6 +117,7 @@
rid: '',
webV: null,
wv: null,
+ mapHeight: 0,
latitude: 28.687205773173343,
longitude: 115.8995839881188,
circles: [], //圆
@@ -129,9 +137,45 @@
},
bye: true,
types: '', //android?
+ moveDom: null, //移动实体类
+ activeHeight: "auto ", //活动高度 默认自动
+ afterClass: {},
+ activeTip: false, //是否展开
+
+ mapControls: [{
+ id: "1",
+ position: 20,
+ iconPath: "/static/tabbar/addSelectedIcon.png",
+ clickable: true,
+ }], //地图控件
+ beginFindDW: false, //是否旋转
}
},
methods: {
+ mapControlsBack() {
+ // console.log(1111)
+ this.beginFindDW = true;
+ this.getLocationInfo("notSet");
+
+ },
+ 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 +304,7 @@
// }
// })
let d = {
- rid:rid,
+ rid: rid,
serid: serid,
type: type,
// data: JSON.stringify(item),
@@ -361,7 +405,7 @@
latitude: a,
});
},
- getLocationInfo() {
+ getLocationInfo(val) {
var that = this
uni.getLocation({
type: 'wgs84',
@@ -372,11 +416,6 @@
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秒送数据
that.map.moveToLocation({
latitude: res.latitude,
longitude: res.longitude
@@ -398,6 +437,14 @@
radius: 10, //半径
strokeWidth: 2 //描边的宽度
}]
+ that.beginFindDW = false;
+ if (val != "notSet") {
+ let d = {
+ id: that.ourData.id,
+ intlat: [res.longitude, res.latitude]
+ }
+ that.timeBeginSet(d) //30秒送数据
+ }
}
});
},
@@ -510,7 +557,49 @@
onReady() {
let that = this;
- this.types = uni.getSystemInfoSync().platform;
+ this.types = uni.getSystemInfoSync();
+
+
+ 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 +646,7 @@
// data = JSON.stringify({
datas = {
appenUrl: "http://192.168.0.108:83/",
- butCT: "beginUp",
+ butCT: "begin",
buttype: 0,
captain: "我",
city: "南昌市",
@@ -611,6 +700,12 @@
}
that.ourData = data;
+
+ uni.getSystemInfo({ //初始化地图高度
+ success(res) {
+ that.mapHeight = res.windowHeight;
+ }
+ });
// console.log(data);
// return
// console.log(options.html)
@@ -654,31 +749,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",
@@ -804,18 +899,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 {
@@ -931,4 +1026,93 @@
height: 50px;
}
}
+
+ .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>
diff --git a/pages/grabOrders/map/img/dingwei.png b/pages/grabOrders/map/img/dingwei.png
new file mode 100644
index 0000000..58a917e
--- /dev/null
+++ b/pages/grabOrders/map/img/dingwei.png
Binary files differ
diff --git a/pages/grabOrders/map/js/moveUniAppMap.js b/pages/grabOrders/map/js/moveUniAppMap.js
new file mode 100644
index 0000000..9c494de
--- /dev/null
+++ b/pages/grabOrders/map/js/moveUniAppMap.js
@@ -0,0 +1,128 @@
+class $moveUniAppMap {
+ constructor(arg) {
+ this.activeDom = arg.activeDom; //活动dom
+ this.adaptDom = arg.adaptDom; //适应dom
+ this.windowSize = arg.uni.getSystemInfoSync(); // 设备参数含屏幕尺寸
+ let doms = arg.uni.createSelectorQuery(); //获取dom参数uni工具
+ this.getDoms = (name, fn) => { //fn是会回调函数，不用promis
+ doms.select(name).boundingClientRect((data) => {
+ if (fn) {
+ fn(data)
+ }
+ }).exec()
+ }
+ console.log(this.windowSize)
+
+ this.start = 0;
+ this.end = 0;
+ this.domHeight = 0;
+ this.openValue = false; //方向
+ this.useHeight = arg.useHeight; //使用的低高度
+ this.critical = arg.critical; //收缩展开的程度
+ // this.getDoms(this.activeDom, (res) => { //获取dom最大高度
+ this.maxHeight = arg.maxHeight;
+ // })
+ this.fn = (res) => {
+ if (arg.fn) {
+ arg.fn(res)
+ } else {
+ console.log(res, "未设置输出函数")
+ }
+ }
+
+ return this;
+ }
+ ListenerTouchstart(dom) { //开始移动，记录开始点和活动dom高度
+ this.start = dom.changedTouches[0].clientY;
+ this.getDoms(this.activeDom, (res) => { //动态获取当前活动dom高度
+ this.domHeight = res.height;
+ })
+ // let d = {
+ // state: "start",
+ // height: this.maxHeight,
+ // };
+ // // console.log(cha, "cha")
+ // // console.log(+endOn - +this.start, "cha")
+ // this.fn(d);
+ // console.log(this.start, "this.start")
+ }
+ ListenerTouchmove(dom) {
+ let endOn = dom.changedTouches[0].clientY;
+ // console.log(that.domHeight, that.start, endOn)
+ let usecha = +this.start - +endOn;
+ let cha = this.domHeight + usecha;
+ if (cha >= this.maxHeight) {
+ cha = this.maxHeight;
+ } else if (cha <= this.useHeight) {
+ cha = this.useHeight;
+ }
+ let translate = false;
+ if (usecha >= this.critical) {
+ translate = true;
+ }
+ if (usecha <= -this.critical) {
+ translate = true;
+ }
+ let d = {
+ state: "on",
+ height: cha,
+ translate: translate
+ };
+ if (usecha >= 0) {
+ d.state = "up";
+ }
+ // console.log(cha, "cha")
+ // console.log(usecha, "cha")
+ this.fn(d);
+ }
+ ListenerTouchend(dom) {
+ this.end = dom.changedTouches[0].clientY;
+ let cha, states;
+ if (this.end >= this.start) {
+ states = false; //方向向下收缩
+ cha = this.end - this.start;
+ } else {
+ states = true; //方向向上抬起
+ cha = this.start - this.end;
+ }
+ if (cha >= this.critical) {
+ //高
+ this.judge(states, true); //程度
+ } else if (cha < this.critical) {
+ //低
+ this.judge(states, false); //程度
+ }
+ // console.log(cha)
+ }
+ innit() {
+
+ }
+ //输出事件
+ judge(val, chengdu) {
+ let translate = '';
+ if (chengdu) {
+ this.openValue = val;
+ if (val) {
+ this.height = this.maxHeight; //给到向上的最高高度
+ } else {
+ this.height = this.useHeight; //给到向下的最低高度
+ }
+ } else {
+ this.height = this.domHeight; //给到当前高度
+ }
+ if (this.height == this.maxHeight) {
+ translate = false;
+ } else {
+ translate = true;
+ }
+ let d = {
+ state: this.openValue,
+ height: this.height,
+ translate: translate
+ };
+ // console.log(d)
+ this.fn(d);
+ }
+}
+
+export default $moveUniAppMap;
diff --git a/static/map/dingwei.png b/static/map/dingwei.png
new file mode 100644
index 0000000..58a917e
--- /dev/null
+++ b/static/map/dingwei.png
Binary files differ
--
Gitblit v1.9.3