小程序地图

liuyg

2021-05-10 07a7103c5de16fd19c8fe6385d613be0a9c9517b

小程序地图

 public/xcxh5map/css/body.css

@@ -3,13 +3,19 @@
    margin: 0;
}

html,
body,
#mapVue,
html, body, #mapVue {
    width: 100%;
    height: 100%;
}
#map {
    width: 100%;
    height: 84%;
    height: 50%;
}
#mapVue {
    overflow: hidden;
    /* border: solid 1px springgreen; */
}

#seedata{
    position: fixed;
    bottom: 0;
@@ -19,16 +25,30 @@
    background-color: #fff;
    /* opacity: 0.9; */
}

.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;
}

 public/xcxh5map/js/move.js

New file
@@ -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;

 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,6 +28,7 @@
        },
        beginMap(map, data) {
            var that = this;
            var createMap = () => {
            map = L.map('map', { //初始化地图
                center: [31.87, 120.54],
                zoom: 12,
@@ -38,6 +42,8 @@
                attribution: "高德"
            }
            ).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);
            // 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);
    }
})

 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,6 +55,7 @@
                {{seedata.title}}
            </div>
            <div class="main">
                <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>
@@ -62,6 +66,7 @@
            </div>
        </div>
    </div>
    </div>
    <!-- vue渲染 -->
    <script src="./js/vueMain.js"></script>
</body>