小程序地图

liuyg

2021-05-10 58f31dcefe8d55fd4b71175942eeddedbc1b6553

小程序地图

 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;

 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;

 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');
    }
})