|
|
@@ -1,14 +1,31 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<view id="map" class='map' />
|
|
|
- <view>
|
|
|
- <!-- 普通弹窗 -->
|
|
|
- <uni-popup ref="popup" :is-mask-click="false" background-color="#fff" @change="onPopupChange">
|
|
|
- <view class="popup-content" :class="{ 'popup-bottom': popupType === 'bottom', 'popup-right': popupType === 'right' }">
|
|
|
- <text class="text">popup 内容</text>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
+
|
|
|
+ <view class="fab">
|
|
|
+ <uni-fab ref="fab" :pattern="fab.pattern" :content="fab.content" :horizontal="fab.horizontal"
|
|
|
+ :vertical="fab.vertical" :direction="fab.direction" @trigger="trigger" @fabClick="fabClick" />
|
|
|
</view>
|
|
|
+
|
|
|
+ <div ref="testdiv" class="dragLayer" :class="testdiv" :style="{top: topSize + 'rpx' }"
|
|
|
+ @touchstart="handleTouchStart" @touchend="handleTouchEnd" @touchmove="handleTouchMove">
|
|
|
+ <uni-list>
|
|
|
+ <uni-list :border="true">
|
|
|
+ <!-- 右侧带角标 -->
|
|
|
+ <uni-list-chat title="uni-app" avatar="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
|
|
|
+ note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
|
|
|
+ </uni-list-chat>
|
|
|
+ </uni-list>
|
|
|
+ </uni-list>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 普通弹窗 -->
|
|
|
+ <uni-popup ref="popup" :is-mask-click="false" background-color="#fff" @change="onPopupChange">
|
|
|
+ <view class="popup-content"
|
|
|
+ :class="{ 'popup-bottom': popupType === 'bottom', 'popup-right': popupType === 'right' }">
|
|
|
+ <text class="text">popup 内容</text>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -28,6 +45,55 @@
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
+ mapHeight: 1334,
|
|
|
+ // 屏幕高度
|
|
|
+ screenHeight: 667,
|
|
|
+ latitude: 39.909,
|
|
|
+ longitude: 116.39742,
|
|
|
+ polylines: [],
|
|
|
+
|
|
|
+ testdiv: "testdiv",
|
|
|
+ topSize: 769,
|
|
|
+ // 向上滑动的距离
|
|
|
+ topHeight: 0,
|
|
|
+ isTop: false,
|
|
|
+ // 初始化禁止滑动
|
|
|
+ scrollable: false,
|
|
|
+ refreshing: false,
|
|
|
+ contentOffsetY: 10,
|
|
|
+
|
|
|
+ fab: {
|
|
|
+ horizontal: 'left',
|
|
|
+ vertical: 'bottom',
|
|
|
+ direction: 'horizontal',
|
|
|
+ pattern: {
|
|
|
+ color: '#7A7E83',
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ selectedColor: '#007AFF',
|
|
|
+ buttonColor: '#007AFF',
|
|
|
+ iconColor: '#fff'
|
|
|
+ },
|
|
|
+ is_color_type: false,
|
|
|
+ content: [{
|
|
|
+ iconPath: '/static/image.png',
|
|
|
+ selectedIconPath: '/static/image-active.png',
|
|
|
+ text: '玩家',
|
|
|
+ active: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ iconPath: '/static/home.png',
|
|
|
+ selectedIconPath: '/static/home-active.png',
|
|
|
+ text: '统计',
|
|
|
+ active: false
|
|
|
+ },
|
|
|
+ {
|
|
|
+ iconPath: '/static/star.png',
|
|
|
+ selectedIconPath: '/static/star-active.png',
|
|
|
+ text: '设置',
|
|
|
+ active: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
popupType: 'bottom',
|
|
|
popupShow: false,
|
|
|
map: null,
|
|
|
@@ -195,12 +261,33 @@
|
|
|
// leafletHelper.player.drawOneTrail(1, 10000, true)
|
|
|
// leafletHelper.player.drawOneTrail(2, 0, false)
|
|
|
leafletHelper.player.drawAllTrails(5000)
|
|
|
-
|
|
|
+
|
|
|
leafletHelper.checkPoint.toggle(true)
|
|
|
leafletHelper.player.togglePlayer(true)
|
|
|
leafletHelper.player.toggleTooltip(true)
|
|
|
leafletHelper.player.toggleTrail(true)
|
|
|
},
|
|
|
+ trigger(e) {
|
|
|
+ console.log(e)
|
|
|
+ this.content[e.index].active = !e.item.active
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
|
|
|
+ success: function(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ console.log('用户点击确定')
|
|
|
+ } else if (res.cancel) {
|
|
|
+ console.log('用户点击取消')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fabClick() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '点击了悬浮按钮',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ },
|
|
|
//type: 弹出方式 [ top center bottom left right ]
|
|
|
popup(type) {
|
|
|
this.type = type
|
|
|
@@ -215,21 +302,150 @@
|
|
|
onPopupChange(e) {
|
|
|
console.log('[onPopupChange] 当前模式：' + e.type + ', 状态：' + e.show);
|
|
|
},
|
|
|
+
|
|
|
+ // ========================================================= //
|
|
|
+
|
|
|
+ getEl: function(el) {
|
|
|
+ if (typeof el === 'string' || typeof el === 'number') return el;
|
|
|
+ return el instanceof HTMLElement ? el : el.$el;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取角度
|
|
|
+ getAngle(angx, angy) {
|
|
|
+ return Math.atan2(angy, angx) * 180 / Math.PI;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
|
|
|
+ getDirection(startx, starty, endx, endy) {
|
|
|
+ var angx = endx - startx;
|
|
|
+ var angy = endy - starty;
|
|
|
+ var result = 0;
|
|
|
+ //如果滑动距离太短
|
|
|
+ if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ var angle = this.getAngle(angx, angy);
|
|
|
+ if (angle >= -135 && angle <= -45) {
|
|
|
+ result = 1;
|
|
|
+ } else if (angle > 45 && angle < 135) {
|
|
|
+ result = 2;
|
|
|
+ } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
|
|
|
+ result = 3;
|
|
|
+ } else if (angle >= -45 && angle <= 45) {
|
|
|
+ result = 4;
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 手势滑动开始
|
|
|
+ handleTouchStart(e) {
|
|
|
+ this.startx = e.changedTouches[0].pageX;
|
|
|
+ this.starty = e.changedTouches[0].pageY;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 手势滑动结束
|
|
|
+ handleTouchEnd(e) {
|
|
|
+ var endx, endy;
|
|
|
+ endx = e.changedTouches[0].pageX;
|
|
|
+ endy = e.changedTouches[0].pageY;
|
|
|
+ var direction = this.getDirection(this.startx, this.starty, endx, endy);
|
|
|
+ switch (direction) {
|
|
|
+ // 未滑动！
|
|
|
+ case 0:
|
|
|
+ break;
|
|
|
+ // 向上滑动
|
|
|
+ case 1:
|
|
|
+ if (!this.isTop) {
|
|
|
+ this.goTop();
|
|
|
+ this.isTop = true
|
|
|
+ this.scrollable = true
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ // 向下滑动
|
|
|
+ case 2:
|
|
|
+ if (this.isTop && this.contentOffsetY == 0) {
|
|
|
+ this.goBottom();
|
|
|
+ this.isTop = false
|
|
|
+ this.scrollable = false
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ // 向左
|
|
|
+ case 3:
|
|
|
+ break;
|
|
|
+
|
|
|
+ // 向右
|
|
|
+ case 4:
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ handleTouchMove(e) {},
|
|
|
+
|
|
|
+ // 上滑操作
|
|
|
+ goTop() {
|
|
|
+ console.log("上滑操作")
|
|
|
+ let box = this.getEl(this.$refs.testdiv);
|
|
|
+ let topHeight = this.topHeight
|
|
|
+ // Binding.bind({
|
|
|
+ // eventType: 'timing',
|
|
|
+ // exitExpression: {
|
|
|
+ // origin: 't>800'
|
|
|
+ // },
|
|
|
+ // props: [{
|
|
|
+ // element: box,
|
|
|
+ // property: 'transform.translateY',
|
|
|
+ // expression: {
|
|
|
+ // origin: "easeOutQuint(t, 0, - " + topHeight + ", 800)"
|
|
|
+ // }
|
|
|
+ // }]
|
|
|
+ // });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下滑操作
|
|
|
+ goBottom() {
|
|
|
+ console.log("下滑操作")
|
|
|
+ let box = this.getEl(this.$refs.testdiv);
|
|
|
+ let topHeight = this.topHeight
|
|
|
+ // Binding.bind({
|
|
|
+ // eventType: 'timing',
|
|
|
+ // exitExpression: {
|
|
|
+ // origin: 't>800'
|
|
|
+ // },
|
|
|
+ // props: [{
|
|
|
+ // element: box,
|
|
|
+ // property: 'transform.translateY',
|
|
|
+ // expression: {
|
|
|
+ // origin: "easeOutQuint(t, - " + topHeight + ", " + topHeight + ", 800)"
|
|
|
+ // }
|
|
|
+ // }, ]
|
|
|
+ // });
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.refreshing = false
|
|
|
+ // }, 100)
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.map {
|
|
|
+ z-index: 0;
|
|
|
width: 100vw;
|
|
|
// height: 100vh;
|
|
|
- height: 95vh;
|
|
|
+ height: 35vh;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
background-color: white;
|
|
|
}
|
|
|
|
|
|
+ .fab {
|
|
|
+ z-index: 1000;
|
|
|
+ width: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
// @mixin flex {
|
|
|
// /* #ifndef APP-NVUE */
|
|
|
// display: flex;
|
