From 58f31dcefe8d55fd4b71175942eeddedbc1b6553 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 10 May 2021 16:22:47 +0800
Subject: [PATCH] 小程序地图
---
public/xcxh5map/js/move.js | 47 ++++++++++++++++-------
public/xcxh5map/css/body.css | 9 +++-
public/xcxh5map/js/vueMain.js | 16 +++++++
3 files changed, 54 insertions(+), 18 deletions(-)
diff --git a/public/xcxh5map/css/body.css b/public/xcxh5map/css/body.css
index 2a0fe24..e17e037 100644
--- a/public/xcxh5map/css/body.css
+++ b/public/xcxh5map/css/body.css
@@ -20,19 +20,22 @@
position: fixed;
bottom: 0;
width: 100%;
- height: 50%;
+ height: 60%;
z-index: 400;
background-color: #fff;
/* opacity: 0.9; */
+ display: flex;
+ flex-direction: column;
+ border-radius: 60px 60px 0 0;
}
.title {
width: 100%;
height: 14%;
/* border: 1px solid springgreen; */
- border-radius: 1000px 1000px 0 0;
+ border-radius: 60px 60px 0 0;
position: relative;
- top: -14%;
+ /* top: -2%; */
background-color: #fff;
z-index: 401;
display: flex;
diff --git a/public/xcxh5map/js/move.js b/public/xcxh5map/js/move.js
index 2b1aaf5..c05cb49 100644
--- a/public/xcxh5map/js/move.js
+++ b/public/xcxh5map/js/move.js
@@ -1,4 +1,5 @@
-function myDomMove(dom,div, map) {
+// 使用说明：（需要移动的dom，触摸块dom，跟随改变map dom）
+function myDomMove(dom, div, map) {
this.m = $(dom);
this.div = $(div);
this.mapId = $(map);
@@ -10,10 +11,8 @@
this.__dy = null;
this.mapH = null;//地图高度
this.__wy = null;//屏幕高度
- this.state = 'down';//dom状态
- this.con = () => {
- console.log(this.m);
- }
+ this.state = "up";//dom状态默认up
+
this.getMosePosition = (x, y) => {//获取鼠标位置
this.__sx = x;
this.__sy = y;
@@ -46,10 +45,13 @@
//begin
- this.followFinger = (map) => {
+ this.followFinger = (map, state = 14) => {//(地图实例，dom状态判断是向上还是向下)
console.log('开始跟随手指');
var that = this;
-
+ if(state != 14){
+ that.state = state;
+ console.log(that.state);
+ }
that.getDomPosition();//获取dom位置
that.getMapHeight();//获取地图高度
var once = true;
@@ -57,22 +59,23 @@
e = e || window.event;
that.__xx = e.touches[0].clientX;
that.__yy = e.touches[0].clientY;
- if (once) {
+ if (once) {//获取第一次点击的位置
once = false;
that.getMosePosition(that.__xx, that.__yy);
}
// console.log(that.__yy, '鼠标');
- var h = that.__yy - that.__sy
+ var h = that.__yy - that.__sy//鼠标移动距离y
if (that.state == 'down') {//两种模式
console.log(that.state);
if (h >= 0 && h + that.__dy <= that.__wy - 20) {
that.changeDomPosition(0, h, h + that.__dy);//改变位置
+ console.log(that.state,h + that.__dy,112);
}
} else if (that.state == 'up') {
- console.log(that.state);
if (h >= -that.__dy && h <= that.__wy - 20) {
that.changeDomPosition(0, h, h + that.__wy - 20);//改变位置
+ console.log(that.state,h + that.__wy - 20,112);
}
}
@@ -85,24 +88,40 @@
var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
}
if (chous) {
- that.changeDomPosition(0, 0, that.__dy);//改变位置
+ that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 3.999));//改变位置
// that.getDomPosition();//抬起获取dom位置/持续停留使用
that.state = 'down';
$('#map').css("height", (index, value) => {//改变地图高度
return '50%';
})
- map.invalidateSize(true);
+ map.invalidateSize(true);//应用地图高度
} else {
- that.changeDomPosition(0, 0, that.__wy - 20);//改变位置
+ that.changeDomPosition(0, 0, that.__wy - 50);//改变位置
// that.getDomPosition();//抬起获取dom位置/持续停留使用
that.state = 'up';
$('#map').css("height", (index, value) => {//改变地图高度
return '100%';
})
- map.invalidateSize(true);
+ map.invalidateSize(true);//应用地图高度
}
that.getMapHeight();//抬起获取map高度
});
}
+ this.destruction = () => {//初始化销毁
+ this.m = $(dom);
+ this.div = $(div);
+ this.mapId = $(map);
+ this.__xx = null;//鼠标实时位置
+ this.__yy = null;
+ this.__sx = null;//鼠标开始位置
+ this.__sy = null;
+ this.__dx = null;//dom位置
+ this.__dy = null;
+ this.mapH = null;//地图高度
+ this.__wy = null;//屏幕高度
+ this.state = "up";//dom状态默认up
+ this.div.off();
+ }
}
+
// export default myDomMove;
\ No newline at end of file
diff --git a/public/xcxh5map/js/vueMain.js b/public/xcxh5map/js/vueMain.js
index d840ee8..3a3f2ce 100644
--- a/public/xcxh5map/js/vueMain.js
+++ b/public/xcxh5map/js/vueMain.js
@@ -90,7 +90,15 @@
markers.on('click', function (a) {
// that.drawer = true;
that.seedata = a.layer.options.myData;
+ $('#seedata').css('top', '');
+ $('#map').css("height", (index, value) => {//改变地图高度
+ return '50%';
+ })
+ map.invalidateSize(true);//应用地图高度
// console.log(a.layer.options.myData);
+ that.move.destruction();
+ that.move.followFinger(map, 'down');
+
});
return map;//抛出map
},
@@ -102,6 +110,12 @@
this.getdata = this.getQueryVariable('data');
this.map = this.beginMap(this.map, this.getdata);//创建并接受map
this.move = new myDomMove('#seedata', '.title', '#map');
- this.move.followFinger(this.map);
+ var dy = document.documentElement.clientHeight - 50;
+ $('#seedata').animate({ top: dy + "px" }, 10);
+ $('#map').css("height", (index, value) => {//改变地图高度
+ return '100%';
+ })
+ this.map.invalidateSize(true);//应用地图高度
+ this.move.followFinger(this.map, 'up');
}
})
\ No newline at end of file
--
Gitblit v1.9.3