From 07a7103c5de16fd19c8fe6385d613be0a9c9517b Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 10 May 2021 14:55:39 +0800
Subject: [PATCH] 小程序地图
---
public/xcxh5map/js/move.js | 104 ++++++++++++++++++++++++++
public/xcxh5map/xcxmap.html | 21 +++--
public/xcxh5map/css/body.css | 40 +++++++--
public/xcxh5map/js/vueMain.js | 41 ++++++----
4 files changed, 172 insertions(+), 34 deletions(-)
diff --git a/public/xcxh5map/css/body.css b/public/xcxh5map/css/body.css
index d426ce1..2a0fe24 100644
--- a/public/xcxh5map/css/body.css
+++ b/public/xcxh5map/css/body.css
@@ -3,14 +3,20 @@
margin: 0;
}
-html,
-body,
-#mapVue,
-#map {
+html, body, #mapVue {
width: 100%;
- height: 84%;
+ height: 100%;
}
-#seedata{
+#map{
+ width: 100%;
+ height: 50%;
+}
+#mapVue {
+ overflow: hidden;
+ /* border: solid 1px springgreen; */
+}
+
+#seedata {
position: fixed;
bottom: 0;
width: 100%;
@@ -19,16 +25,30 @@
background-color: #fff;
/* opacity: 0.9; */
}
-.title{
+
+.title {
width: 100%;
- height: 7%;
+ height: 14%;
/* border: 1px solid springgreen; */
border-radius: 1000px 1000px 0 0;
- position: fixed;
- top: 43%;
+ position: relative;
+ top: -14%;
background-color: #fff;
z-index: 401;
display: flex;
align-items: center;
justify-content: center;
+}
+
+.title::after {
+ content: '';
+ display: block;
+ width: 40px;
+ height: 40px;
+ border: springgreen solid 1px;
+}
+
+.main {
+ display: flex;
+ justify-content: center;
}
\ No newline at end of file
diff --git a/public/xcxh5map/js/move.js b/public/xcxh5map/js/move.js
new file mode 100644
index 0000000..5d995a3
--- /dev/null
+++ b/public/xcxh5map/js/move.js
@@ -0,0 +1,104 @@
+function myDomMove(dom,div, map) {
+ 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 = 'down';//dom状态
+ this.con = () => {
+ console.log(this.m);
+ }
+ this.getMosePosition = (x, y) => {//获取鼠标位置
+ this.__sx = x;
+ this.__sy = y;
+ // console.log(this.__sy, '鼠标开始');
+
+ }
+ this.getDomPosition = () => {//获取dom位置
+ this.__dx = this.m.offset().left;
+ this.__dy = this.m.offset().top;
+ this.__wy = document.documentElement.clientHeight;
+ // console.log(this.__dy, 'dom');
+ }
+ this.getMapHeight = () => {//获取地图高度
+ var that = this;
+ this.mapId.css("height", (index, value) => {
+ that.mapH = parseFloat(value);
+ })
+ // console.log(that.mapH, 'map位置');
+ }
+ this.changeDomPosition = (x, y, dy) => {//改变dom位置
+ var that = this;
+ // this.mapId.css("height", (index, value) => {//改变地图高度
+ // var h = this.mapH + y;
+ // console.log(h);
+ // return h ;
+ // })
+ this.m.animate({ top: dy + "px" }, 10);
+
+ }
+
+
+ //begin
+ this.followFinger = (map) => {
+ console.log('开始跟随手指');
+ var that = this;
+
+ that.getDomPosition();//获取dom位置
+ that.getMapHeight();//获取地图高度
+ var once = true;
+ that.div.on('touchmove', function (e) {//获取鼠标位置
+ e = e || window.event;
+ that.__xx = e.touches[0].clientX;
+ that.__yy = e.touches[0].clientY;
+ if (once) {
+ once = false;
+ that.getMosePosition(that.__xx, that.__yy);
+ }
+ // console.log(that.__yy, '鼠标');
+ var h = that.__yy - that.__sy;
+
+ if (that.state == 'down') {//两种模式
+ var chous = h >= 0 && h + that.__dy <= that.__wy - 20;
+ } else if (that.state == 'up') {
+ var chous = h >= -that.__dy && h <= that.__wy - 20;
+ }
+ if (chous) {
+ that.changeDomPosition(0, h, h + that.__wy - 20);//改变位置
+ }
+ });
+ that.div.on('touchend', function () {//抬起重置
+ once = true;//抬起重置鼠标点击位置
+ if (that.state == 'down') {//两种模式
+ var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4;
+ } else if (that.state == 'up') {
+ var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
+ }
+ if (chous) {
+ that.changeDomPosition(0, 0, that.__dy);//改变位置
+ // that.getDomPosition();//抬起获取dom位置/持续停留使用
+ that.state = 'down';
+ $('#map').css("height", (index, value) => {//改变地图高度
+ return '50%';
+ })
+ map.invalidateSize(true);
+ } else {
+ that.changeDomPosition(0, 0, that.__wy - 20);//改变位置
+ // that.getDomPosition();//抬起获取dom位置/持续停留使用
+ that.state = 'up';
+ $('#map').css("height", (index, value) => {//改变地图高度
+ return '100%';
+ })
+ map.invalidateSize(true);
+ }
+ that.getMapHeight();//抬起获取map高度
+ });
+ }
+}
+// export default myDomMove;
\ No newline at end of file
diff --git a/public/xcxh5map/js/vueMain.js b/public/xcxh5map/js/vueMain.js
index 6fc20a3..d840ee8 100644
--- a/public/xcxh5map/js/vueMain.js
+++ b/public/xcxh5map/js/vueMain.js
@@ -1,3 +1,4 @@
+// import myDomMove from './move'
var me = new Vue({
el: '#mapVue',
data: {
@@ -8,6 +9,8 @@
nowIndex: null,
activeName: 'first',
+
+ move: null,//存放移动实例
seedata: '',
dialogVisible: 'true',
@@ -25,19 +28,22 @@
},
beginMap(map, data) {
var that = this;
- map = L.map('map', { //初始化地图
- center: [31.87, 120.54],
- zoom: 12,
- // crs: L.CRS.EPSG4326, //设置坐标系4326
- attributionControl: false, //去掉右下角
- zoomControl: false, //去掉缩放
- });
- L.tileLayer( //添加切片图层
- "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
- subdomains: ["1", "2", "3", "4"],
- attribution: "高德"
+ var createMap = () => {
+ map = L.map('map', { //初始化地图
+ center: [31.87, 120.54],
+ zoom: 12,
+ // crs: L.CRS.EPSG4326, //设置坐标系4326
+ attributionControl: false, //去掉右下角
+ zoomControl: false, //去掉缩放
+ });
+ L.tileLayer( //添加切片图层
+ "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {
+ subdomains: ["1", "2", "3", "4"],
+ attribution: "高德"
+ }
+ ).addTo(map);
}
- ).addTo(map);
+ createMap();
var markers = L.markerClusterGroup();
var transportIcon = L.Icon.extend({ //图标初始化
@@ -84,15 +90,18 @@
markers.on('click', function (a) {
// that.drawer = true;
that.seedata = a.layer.options.myData;
- console.log(a.layer.options.myData)
+ // console.log(a.layer.options.myData);
});
+ return map;//抛出map
},
- handleClick(tab, event){
- console.log(tab, event);
+ handleClick(tab, event) {
+ // console.log(tab, event);
}
},
mounted() {
this.getdata = this.getQueryVariable('data');
- this.beginMap(this.map, this.getdata)
+ this.map = this.beginMap(this.map, this.getdata);//创建并接受map
+ this.move = new myDomMove('#seedata', '.title', '#map');
+ this.move.followFinger(this.map);
}
})
\ No newline at end of file
diff --git a/public/xcxh5map/xcxmap.html b/public/xcxh5map/xcxmap.html
index 6ba90af..4d5fdb4 100644
--- a/public/xcxh5map/xcxmap.html
+++ b/public/xcxh5map/xcxmap.html
@@ -29,7 +29,7 @@
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<!-- jqurey -->
- <!-- <script src="../map/lib/jquery.js" charset="utf-8"></script> -->
+ <script src="../map/lib/jquery.js" charset="utf-8"></script>
<!-- 微信支持 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
@@ -37,6 +37,9 @@
<!-- omyself支持 -->
<link rel="stylesheet" href="./css/body.css" />
+
+ <!-- myDomMove -->
+ <script src="./js/move.js"></script>
</head>
<body>
@@ -52,13 +55,15 @@
{{seedata.title}}
</div>
<div class="main">
- <el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
- </el-tabs>
- {{seedata.jd}}-{{seedata.wd}}
+ <div>
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
+ <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+ <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+ <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
+ </el-tabs>
+ {{seedata.jd}}-{{seedata.wd}}
+ </div>
</div>
</div>
</div>
--
Gitblit v1.9.3