+地图优化 添加可收缩详情面板，添加定位按钮

liuyg

2022-02-24 c51caf4a8622f35200f926d01d270d138299738f

+地图优化 添加可收缩详情面板，添加定位按钮

 pages/grabOrders/map.vue

@@ -5,8 +5,15 @@
        <!-- <web-view :src="urls" @message="message"></web-view> -->
        <map :scale='18' id="myMap" style="width: 100%" :style="{height: mapHeight + 'px'}" :markers="markersCom"
            :longitude="longitude" :latitude="latitude" :circles="circlesCom" :polyline="mypolylinesCom"
            show-location="true"></map>
        <view id="Umain">
            show-location="true">
            <cover-view class="dingwBut" @click="mapControlsBack">
                <cover-image :class="[beginFindDW?'dingwButImg':'']" src="./map/img/dingwei.png"
                    @click="mapControlsBack"></cover-image>
            </cover-view>
        </map>
        <view id="Umain" :style="{ height: activeHeight}" @touchstart="touchstart" @touchend="touchend"
            @touchmove="touchmove">
            <view :class="['activeTip',activeTip?'isOpens':'notOpens'] " :style="{height:'30px'}"></view>
            <view class="once-b">
                任务详情
            </view>
@@ -100,7 +107,7 @@
</template>

<script>
    import $moveWindow from "./map/js/move.js"
    import $moveUniAppMap from "./map/js/moveUniAppMap.js"
    export default {
        data() {
            return {
@@ -110,6 +117,7 @@
                rid: '',
                webV: null,
                wv: null,
                mapHeight: 0,
                latitude: 28.687205773173343,
                longitude: 115.8995839881188,
                circles: [], //圆
@@ -129,9 +137,45 @@
                },
                bye: true,
                types: '', //android?
                moveDom: null, //移动实体类
                activeHeight: "auto ", //活动高度  默认自动
                afterClass: {},
                activeTip: false, //是否展开

                mapControls: [{
                    id: "1",
                    position: 20,
                    iconPath: "/static/tabbar/addSelectedIcon.png",
                    clickable: true,
                }], //地图控件
                beginFindDW: false, //是否旋转
            }
        },
        methods: {
            mapControlsBack() {
                // console.log(1111)
                this.beginFindDW = true;
                this.getLocationInfo("notSet");

            },
            touchstart(e) {
                // console.log(e.changedTouches[0].clientY)
                if (this.moveDom) {
                    this.moveDom.ListenerTouchstart(e)
                }
            },
            touchmove(e) {
                // console.log(e.changedTouches[0].clientY)
                if (this.moveDom) {
                    this.moveDom.ListenerTouchmove(e)
                }
            },
            touchend(e) {
                // console.log(e.changedTouches[0].clientY)
                if (this.moveDom) {
                    this.moveDom.ListenerTouchend(e)
                }
            },
            openAPP(type) {
                let that = this;
                if (type == "oks") {
@@ -260,7 +304,7 @@
                        //     }
                        // })
                        let d = {
                            rid:rid,
                            rid: rid,
                            serid: serid,
                            type: type,
                            // data: JSON.stringify(item),
@@ -361,7 +405,7 @@
                    latitude: a,
                });
            },
            getLocationInfo() {
            getLocationInfo(val) {
                var that = this
                uni.getLocation({
                    type: 'wgs84',
@@ -372,11 +416,6 @@
                        that.longitude = res.longitude
                        console.log(that.latitude)
                        console.log(that.longitude)
                        let d = {
                            id: that.ourData.id,
                            intlat: [res.longitude, res.latitude]
                        }
                        that.timeBeginSet(d) //30秒送数据
                        that.map.moveToLocation({
                            latitude: res.latitude,
                            longitude: res.longitude
@@ -398,6 +437,14 @@
                            radius: 10, //半径
                            strokeWidth: 2 //描边的宽度
                        }]
                        that.beginFindDW = false;
                        if (val != "notSet") {
                            let d = {
                                id: that.ourData.id,
                                intlat: [res.longitude, res.latitude]
                            }
                            that.timeBeginSet(d) //30秒送数据
                        }
                    }
                });
            },
@@ -510,7 +557,49 @@
        onReady() {
            let that = this;

            this.types = uni.getSystemInfoSync().platform;
            this.types = uni.getSystemInfoSync();


            let activeHeight = 0;
            this.getDom("#Umain", (res) => {
                // console.log(res, 1111111111111111111111111111)
                that.mapHeight = that.types.windowHeight - res.height + 30;
                // that.mapHeight = 30;
                that.activeHeight = res.height;
                activeHeight = res.height;
                let minHeight = 4 * 40 + 30
                let d = {
                    activeDom: "#Umain",
                    adaptDom: "#myMap",
                    uni: uni,
                    maxHeight: activeHeight, //在外面获取活动区域的高度，
                    //在构造中动态获取会实时改变这个值
                    //导致改变固定的最高高度
                    useHeight: minHeight, //缩小后的高度、、可设置成保留高度
                    critical: (activeHeight - minHeight) / 3, //收缩程度，，可设置成总滑动距离的1/2 (maxHeight - useHeight) / 2
                    fn: (res) => {
                        // console.log(res)
                        if (res.state != 'on') {
                            that.mapHeight = that.types.windowHeight - res.height + 30;
                        } else {
                            if (res.translate) {
                                that.activeTip = true;
                            }
                            if (res.translate) {
                                that.activeTip = false;
                            }
                        }

                        if (res.translate === true) {
                            that.activeTip = true;
                        } else if (res.translate === false) {
                            that.activeTip = false;
                        }
                        that.activeHeight = res.height + 'px';
                    }
                }
                that.moveDom = new $moveUniAppMap(d);
            })
            // if (type == "android") {
            //     this.useHeight = "calc(100vh - 40px)";
            // }
@@ -557,7 +646,7 @@
                // data = JSON.stringify({
                datas = {
                    appenUrl: "http://192.168.0.108:83/",
                    butCT: "beginUp",
                    butCT: "begin",
                    buttype: 0,
                    captain: "我",
                    city: "南昌市",
@@ -611,6 +700,12 @@
            }
            that.ourData = data;


            uni.getSystemInfo({ //初始化地图高度
                success(res) {
                    that.mapHeight = res.windowHeight;
                }
            });
            // console.log(data);
            // return
            // console.log(options.html)
@@ -654,31 +749,31 @@
            // }
            that.query = uni.createSelectorQuery();
            const _this = this;
            uni.getSystemInfo({
                success: (res) => {
                    // _this.mapHeight = (res.screenHeight - res.statusBarHeight) /2 
                    // setTimeout(() => {
                    // that.getDom('#Umain', data => {
                    // console.log(res.statusBarHeight, res.screenHeight, data, 'dat')
                    // console.log(res.screenHeight - data.height + res
                    //     .statusBarHeight)
                    // _this.mapHeight = res.screenHeight - res.statusBarHeight - 420
                    that.mapHeight = res.screenHeight - res.statusBarHeight - 466
                    that.mapHeight = that.mapHeight
                    // })
                    // }, 1000)
            // uni.getSystemInfo({
            //     success: (res) => {
            //         // _this.mapHeight = (res.screenHeight - res.statusBarHeight) /2 
            //         // setTimeout(() => {
            //         // that.getDom('#Umain', data => {
            //         // console.log(res.statusBarHeight, res.screenHeight, data, 'dat')
            //         // console.log(res.screenHeight - data.height + res
            //         //     .statusBarHeight)
            //         // _this.mapHeight = res.screenHeight - res.statusBarHeight - 420
            //         that.mapHeight = res.screenHeight - res.statusBarHeight - 466
            //         that.mapHeight = that.mapHeight
            //         // })
            //         // }, 1000)

                    // that.query.select('#Umain').boundingClientRect(data => {
                    //     console.log('11111111')
                    //     console.log(data)
                    // }).exec();
                    // console.log(res)
                    // let info = uni.createSelectorQuery().select("Umain");
                    // info.boundingClientRect(function(data) { //data - 各种参数
                    //     console.log(data.width) // 获取元素宽度
                    // }).exec()
                }
            })
            //         // that.query.select('#Umain').boundingClientRect(data => {
            //         //     console.log('11111111')
            //         //     console.log(data)
            //         // }).exec();
            //         // console.log(res)
            //         // let info = uni.createSelectorQuery().select("Umain");
            //         // info.boundingClientRect(function(data) { //data - 各种参数
            //         //     console.log(data.width) // 获取元素宽度
            //         // }).exec()
            //     }
            // })
            // console.log(document.getElementById("Umain"))
            // this.checkDomHeightId({
            //     domName: "getElementById",
@@ -804,18 +899,18 @@

<style lang="scss">
    .content {
        flex: 1;
        height: 100%;
        // flex: 1;
        // height: 100%;
        overflow: hidden;
        // position: relative;
    }

    #Umain {
        position: absolute;
        width: 100%;
        height: auto;
        left: 0;
        bottom: 0;
        background-color: #e8e8e8;
        z-index: 1000000;
        left: 0;
        width: 100%;
        overflow: hidden;
    }

    .once {
@@ -931,4 +1026,93 @@
            height: 50px;
        }
    }

    .notOpens {
        &::after {
            content: "";
            display: block;
            width: 20px;
            height: 4px;
            background-color: rgba(202, 202, 202, 1);
            position: absolute;
            top: 10px;
            left: calc(50% - 10px);
            border-radius: 5px;
            transition: all 0.1s;
        }
    }

    .activeTip {
        background-color: #fff;
    }

    .isOpens {
        &::after {
            content: "";
            display: block;
            width: 13px;
            height: 4px;
            background-color: rgba(202, 202, 202, 1);
            position: absolute;
            top: 10px;
            left: calc(50% - 12px);
            border-radius: 5px;
            transform: rotate(30deg);
            transition: all 0.1s;
        }

        &::before {
            content: "";
            display: block;
            width: 13px;
            height: 4px;
            background-color: rgba(202, 202, 202, 1);
            position: absolute;
            top: 10px;
            left: calc(50% - 4px);
            border-radius: 5px;
            transform: rotate(-30deg);
            transition: all 0.1s;
        }
    }

    .dingwBut {
        width: 80upx;
        height: 80upx;
        background-color: #fff;
        border-radius: 20upx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 40upx;
        right: 40upx;

        // background-color: red;
        // .dingwButImg {
        //     width: 80%;
        //     height: 80%;
        // }
        // .icon{
        // }
        // &::after{
        //     content: url(map/img/dingwei.png);
        // }
        .dingwButImg {
            animation: mymove 5s infinite;
            animation-timing-function: linear;
        }
    }



    @keyframes mymove {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(1turn);
        }
    }
</style>

 pages/grabOrders/map/img/dingwei.png

 pages/grabOrders/map/js/moveUniAppMap.js

New file
@@ -0,0 +1,128 @@
class $moveUniAppMap {
    constructor(arg) {
        this.activeDom = arg.activeDom; //活动dom
        this.adaptDom = arg.adaptDom; //适应dom
        this.windowSize = arg.uni.getSystemInfoSync(); // 设备参数含屏幕尺寸
        let doms = arg.uni.createSelectorQuery(); //获取dom参数uni工具
        this.getDoms = (name, fn) => { //fn是会回调函数，不用promis
            doms.select(name).boundingClientRect((data) => {
                if (fn) {
                    fn(data)
                }
            }).exec()
        }
        console.log(this.windowSize)

        this.start = 0;
        this.end = 0;
        this.domHeight = 0;
        this.openValue = false; //方向
        this.useHeight = arg.useHeight; //使用的低高度
        this.critical = arg.critical; //收缩展开的程度
        // this.getDoms(this.activeDom, (res) => { //获取dom最大高度
        this.maxHeight = arg.maxHeight;
        // })
        this.fn = (res) => {
            if (arg.fn) {
                arg.fn(res)
            } else {
                console.log(res, "未设置输出函数")
            }
        }

        return this;
    }
    ListenerTouchstart(dom) { //开始移动，记录开始点和活动dom高度
        this.start = dom.changedTouches[0].clientY;
        this.getDoms(this.activeDom, (res) => { //动态获取当前活动dom高度
            this.domHeight = res.height;
        })
        // let d = {
        //     state: "start",
        //     height: this.maxHeight,
        // };
        // // console.log(cha, "cha")
        // // console.log(+endOn - +this.start, "cha")
        // this.fn(d);
        // console.log(this.start, "this.start")
    }
    ListenerTouchmove(dom) {
        let endOn = dom.changedTouches[0].clientY;
        // console.log(that.domHeight, that.start, endOn)
        let usecha = +this.start - +endOn;
        let cha = this.domHeight + usecha;
        if (cha >= this.maxHeight) {
            cha = this.maxHeight;
        } else if (cha <= this.useHeight) {
            cha = this.useHeight;
        }
        let translate = false;
        if (usecha >= this.critical) {
            translate = true;
        }
        if (usecha <= -this.critical) {
            translate = true;
        }
        let d = {
            state: "on",
            height: cha,
            translate: translate
        };
        if (usecha >= 0) {
            d.state = "up";
        }
        // console.log(cha, "cha")
        // console.log(usecha, "cha")
        this.fn(d);
    }
    ListenerTouchend(dom) {
        this.end = dom.changedTouches[0].clientY;
        let cha, states;
        if (this.end >= this.start) {
            states = false; //方向向下收缩
            cha = this.end - this.start;
        } else {
            states = true; //方向向上抬起
            cha = this.start - this.end;
        }
        if (cha >= this.critical) {
            //高
            this.judge(states, true); //程度
        } else if (cha < this.critical) {
            //低
            this.judge(states, false); //程度
        }
        // console.log(cha)
    }
    innit() {

    }
    //输出事件
    judge(val, chengdu) {
        let translate = '';
        if (chengdu) {
            this.openValue = val;
            if (val) {
                this.height = this.maxHeight; //给到向上的最高高度
            } else {
                this.height = this.useHeight; //给到向下的最低高度
            }
        } else {
            this.height = this.domHeight; //给到当前高度
        }
        if (this.height == this.maxHeight) {
            translate = false;
        } else {
            translate = true;
        }
        let d = {
            state: this.openValue,
            height: this.height,
            translate: translate
        };
        // console.log(d)
        this.fn(d);
    }
}

export default $moveUniAppMap;

 static/map/dingwei.png