地图修改

zengh

2022-02-19 65de27998cc0131c918721a5987850434bc57110

地图修改

 public/grabOrdersMap/css/body.css

@@ -19,7 +19,7 @@

#map {
    width: 100%;
    height: calc(100% - 300px);
    height: 100%;
    z-index: 1;
}

@@ -32,7 +32,7 @@
    position: fixed;
    width: 38px;
    height: 38px;
    bottom: 8.5rem;
    bottom: 0rem;
    right: 0;
    z-index: 10;
    background-color: #fff;
@@ -88,30 +88,59 @@
    /* border: 1px solid gray; */
}

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

.once{
.once {
    width: 100%;
    height: 40px;
    min-height: 40px;
    background-color: #fff;
    display: flex;
    align-items: center;
    /* margin-bottom: 10px; */
    border-bottom: 1px solid #e8e8e8;
    padding:0 10px ;
    padding: 0 10px;
}
.once-left{

.once-left {
    width: 25%;
    text-align: justify;
    text-align-last: justify;
    padding-right: 20px;
    box-sizing: border-box;
}
.once-c{

.once-left::after {
    content: "：";
    position: absolute;
}

.once-right {
    width: calc(75% - 20px);
    height: auto;
    /* border: 1px solid red; */
    box-sizing: border-box;
    word-break: break-all;
}

.once-right span {
    display: inline-block;
    padding: 0px 5px 1px;
    margin: 0 5px;
    background-color: #ECF5FF;
    border: 0.5px solid #e4f1ff;
    color: #429FFF;
    border-radius: 8px;
}

.once-c {
    width: 100%;
    height: 40px;
    display: flex;
@@ -120,7 +149,8 @@
    padding: 8px 0;
    background-color: #fff;
}
.once-b{

.once-b {
    width: 100%;
    height: 40px;
    display: flex;
@@ -130,7 +160,8 @@
    border-bottom: 1px solid #e8e8e8;
    /* margin-bottom: 10px; */
}
.customClass{

.customClass {
    width: 250px;
    height: 140px;
}
}

 public/grabOrdersMap/img/dinw/dinw1.png

 public/grabOrdersMap/img/dinw/dinw2.png

 public/grabOrdersMap/img/dinw/dinw3.png

 public/grabOrdersMap/img/dinw/dinw4.png

 public/grabOrdersMap/img/dinw/dinw5.png

 public/grabOrdersMap/img/dinw/dinw6.png

 public/grabOrdersMap/js/getPosition.js

New file
@@ -0,0 +1,163 @@
class $getPositions {
    constructor(arg) {
        this.id = arg.id || 0; //任务id
        this.fn = arg.fn ? function(data) {
            arg.fn(data);
        } : function(data) {
            console.log("未设置输出回调")
            return data;
        };
        this.ourPosition = []; //全部位置
        this.nowPosition = []; //当前位置
        this.onceNowPosition = []; //当前一次位置
        this.getOnceSPosition = null;
        this.state = false;
        this.isContinued = false;
        this.isContinuedTime = null;
        return this;
    }
    //开始获取
    init() {
        //判断权限
        return this;

    }
    continued() {
        //开始持续获取定位
        console.log("开始持续定位")
        let that = this;
        this.isContinued = true;
        if (this.isContinuedTime) {
            console.log("重复开始持续定位")
            return;
        } else {
            that.once(function(res) {
                if (res.state == false) {
                    console.log(res.intlat)
                }
            })
            this.isContinuedTime = setInterval(() => {
                that.once(function(res) {
                    if (res.state == false) {
                        console.log(res.intlat)
                    }
                })
            }, 5000)
        }
    }
    overContinued() {
        console.log("结束持续定位")
        let that = this;
        if (this.isContinued) {
            this.isContinued = false;
            clearInterval(that.isContinuedTime);
            this.isContinuedTime = null;
        }
    }
    once(fn) {
        console.log("开始获取一次定位");
        this.state = true;
        let that = this,fns = '',
            outit = function() {
                if (fns) {
                    fns({
                        state: that.state,
                        intlat: that.onceNowPosition
                    })
                } else {
                    that.outData();
                }
            };
        outit();
        let success = function(position) {
            // console.log(position);
            var lat = position.coords.latitude;
            var lon = position.coords.longitude;
            // console.log("成功返回经纬度信息");
            // console.log(lon, lat, "成功");
            that.onceNowPosition = [lat, lon];
            that.state = false;
            outit();
        };
        let error = function(error) {
            // console.log(error, "失败");
            let msg = "none";
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    msg = "User denied the request for Geolocation.";
                    break;
                case error.POSITION_UNAVAILABLE:
                    msg = "Location information is unavailable.";
                    break;
                case error.TIMEOUT:
                    msg = "The request to get user location timed out.";
                    break;
                case error.UNKNOWN_ERROR:
                    msg = "An unknown error occurred.";
                    break;
            }
            that.onceNowPosition = msg;
            that.state = false;
            outit();
        };
        let options = {
            enableHighAccuracy: true,
            // timeout: 5000,
            timeout: Infinity,
            maximumAge: 0,
        };
        this.getOnceSPosition = navigator.geolocation.getCurrentPosition(
            success,
            error,
            options
        );
        //高德定位
        // console.log("开始获取一次定位");
        // this.state = true;
        // let that = this;
        // that.outData();
        // AMap.plugin("AMap.Geolocation", function() {
        //     var geolocation = new AMap.Geolocation({
        //         // 是否使用高精度定位，默认：true
        //         enableHighAccuracy: true,
        //         // 设置定位超时时间，默认：无穷大
        //         // timeout: 10000,
        //     });
        //     geolocation.getCurrentPosition();
        //     AMap.event.addListener(geolocation, "complete", onComplete);
        //     AMap.event.addListener(geolocation, "error", onError);

        //     function onComplete(data) {
        //         // data是具体的定位信息
        //         // console.log(data);
        //         var lat = data.position.lat;
        //         var lon = data.position.lng;
        //         // console.log("成功返回经纬度信息");
        //         // console.log(lon, lat, "成功");
        //         that.onceNowPosition = [lon, lat];
        //         this.state = false;
        //         that.outData();
        //     }

        //     function onError(data) {
        //         // 定位出错
        //         // console.log(data);
        //         that.onceNowPosition = data;
        //         this.state = false;
        //         that.outData();
        //     }
        // });
    }
    //结束获取
    outInit() {

    }
    //抛出数据
    outData() {
        let d = {
            state: this.state,
            intlat: this.onceNowPosition
        }
        this.fn(d)
    }
}

 public/grabOrdersMap/js/move.js

@@ -1,132 +1,173 @@
// 使用说明：（需要移动的dom，触摸块dom，跟随改变map dom）
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 = "up"; //dom状态默认up
class $moveWindow {
    constructor(data) {
        this.id = data.id;
        this.start = 0;
        this.end = 0;
        this.domHeight = 0;
        this.domMove = null;
        this.openValue = false;
        this.useHeight = data.minHeight;
        this.maxHeight = data.maxHeight;
        this.height = data.minHeight;
        this.critical = data.critical;
        this.openAnimation = data.openAnimation;
        let that = this;
        this.fn =
            data.fn ? (function(res) {
                // console.log("回调函数");
                data.fn(res);
                that.changeHeight(res);
                // if (res.state === true) {
                //     console.log(that.openValue, res.state)
                // } else if (res.state === false) {
                //     console.log(that.openValue, res.state)
                // }
            }) :
            (function(res) {
                console.log("未设置回调函数");
                console.log(res);
            });

    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, 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;
        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 //鼠标移动距离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') {
                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);
                }
            }

        });
        that.div.on('touchend', function() { //抬起重置
            once = true; //抬起重置鼠标点击位置
            var chous = null;
            if (that.state == 'down') { //两种模式
                // var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4;
                chous = (that.__sy - that.__yy) < 0;
            } else if (that.state == 'up') {
                // var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
                chous = (that.__sy - that.__yy) < 0;
            }
            if (!chous) {
                //改变dom位置
                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); //应用地图高度
            } else {
                // that.changeDomPosition(0, 0, that.__wy - 50); //改变位置
                that.changeDomPosition(0, 0, that.__wy); //改变位置
                // that.getDomPosition();//抬起获取dom位置/持续停留使用
                that.state = 'up';
                $('#map').css("height", (index, value) => { //改变地图高度
                    return '100%';
                })
                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();
    }
        this.ListenerTouchmove = function(window) {
            let moseHeight = window.changedTouches[0].clientY;
            //   let windowHeight = document.body.clientHeight; //屏幕宽度
            let endOn = moseHeight;
            // console.log(that.domHeight, that.start, endOn)
            let cha = that.domHeight + (+that.start - +endOn);
            if (cha >= that.maxHeight) {
                cha = that.maxHeight;
            } else if (cha <= that.useHeight) {
                cha = that.useHeight;
            }
            let d = {
                state: "on",
                height: cha,
            };
            that.fn(d);
        };
        this.ListenerTouchstart = function(window) {
            let moseHeight = window.changedTouches[0].clientY;
            that.start = moseHeight;
            // that.domHeight = document
            //     .getElementById(that.id)
            //     .style.cssText.split("px")[0]
            //     .split("height:")[1];
            that.domHeight = document
                .getElementById(that.id)
                .clientHeight;
        };
        this.ListenerTouchend = function(window) {
            let moseHeight = window.changedTouches[0].clientY;
            that.end = moseHeight;
            let cha, states;
            if (that.end >= that.start) {
                states = false; //方向
                cha = that.end - that.start;
            } else {
                states = true; //方向
                cha = that.start - that.end;
            }
            if (cha >= that.critical) {
                //高
                that.opens(states, true); //程度
            } else if (cha < that.critical) {
                //低
                that.opens(states, false); //程度
            }
        };
        return this;
    }
    //启动监听事件
    init() {
        // this.domMove = document.getElementById(this.id);
        let that = this;
        this.checkDom(that.id, (dom) => {
            //检测是否有dom
            that.domMove = dom;
            if (that.openAnimation) {
                that.domMove.style.transition = 'all 0.2s';
            }
            that.domMove.addEventListener("touchmove", that.ListenerTouchmove);
            // 结束位置靠滑动距离判断
            that.domMove.addEventListener("touchstart", that.ListenerTouchstart);
            that.domMove.addEventListener("touchend", that.ListenerTouchend);
        });
    }
    //关闭监听事件
    closeInit() {
        this.domMove = document.getElementById(this.id);
        this.domMove.removeEventListener("touchmove", this.ListenerTouchmove);
        // 结束位置靠滑动距离判断
        this.domMove.removeEventListener("touchstart", this.ListenerTouchstart);
        this.domMove.removeEventListener("touchend", this.ListenerTouchend);
    }
    //输出事件
    opens(val, chengdu) {
        if (chengdu) {
            this.openValue = val;
            if (val) {
                this.height = this.maxHeight;
            } else {
                this.height = this.useHeight;
            }
        } else {
            this.height = this.domHeight;
        }
        let d = {
            state: this.openValue,
            height: this.height,
        };
        this.fn(d);
    }
    changeHeight(data) {
        document
            .getElementById(this.id).style.height = data.height  + "px";
    }
    checkDom(name, fn) {
        //  声明定时器
        var timer = null;
        //  检查dom是否执行完成
        function checkDom() {
            // let dom = that.$refs[name];
            let dom = document.getElementById(name);
            if (dom) {
                //  执行dom加载完成后的操作
                //  清除定时器
                if (!timer) {
                    clearTimeout(timer);
                }
                if (fn) {
                    //回调函数
                    fn(dom);
                    return;
                } else {
                    return dom;
                }
            } else {
                //  自我调用
                timer = setTimeout(checkDom, 100);
            }
        }
        //  首次执行
        checkDom();
    }
    // 结束位置是一半判断
    //  domMove.addEventListener("touchend", function (window) {
    //   let moseHeight = window.changedTouches[0].clientY;
    //   let windowHeight = document.body.clientHeight;
    //   let cha = windowHeight - moseHeight;
    //   console.log(cha, "最后位置");
    //   let centerPoint =
    //     (windowHeight / 2 - +that.useHeight) / 2 + +that.useHeight;
    //   if (cha >= centerPoint) {
    //     cha = windowHeight / 2;
    //   } else if (cha < centerPoint) {
    //     cha = that.useHeight;
    //   }
    //   that.height = cha;
    // });
}

// export default myDomMove;
// export default moveWindow;

// console.log(moveWindow)

 public/grabOrdersMap/js/moveold.js

New file
@@ -0,0 +1,132 @@
// 使用说明：（需要移动的dom，触摸块dom，跟随改变map dom）
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 = "up"; //dom状态默认up

    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, 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;
        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 //鼠标移动距离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') {
                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);
                }
            }

        });
        that.div.on('touchend', function() { //抬起重置
            once = true; //抬起重置鼠标点击位置
            var chous = null;
            if (that.state == 'down') { //两种模式
                // var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4;
                chous = (that.__sy - that.__yy) < 0;
            } else if (that.state == 'up') {
                // var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
                chous = (that.__sy - that.__yy) < 0;
            }
            if (!chous) {
                //改变dom位置
                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); //应用地图高度
            } else {
                // that.changeDomPosition(0, 0, that.__wy - 50); //改变位置
                that.changeDomPosition(0, 0, that.__wy); //改变位置
                // that.getDomPosition();//抬起获取dom位置/持续停留使用
                that.state = 'up';
                $('#map').css("height", (index, value) => { //改变地图高度
                    return '100%';
                })
                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/grabOrdersMap/js/vueMain.js

@@ -32,35 +32,28 @@
        oldlat: '',
        oldlng: '',
        haveJDWD: true,
        data: {}
        // {
        //     type: 0,
        //     city: "南昌市",
        //     content: "按路线巡逻",
        //     district: "青山湖区",
        //     id: 5,
        //     integral: "14",
        //     jnum: 2,
        //     line: "LINESTRING(115.88518439579809 28.67705200351289,115.89115548582284 28.677382855466767,115.89148633777671 28.675523782583074,115.88565704144649 28.675145666064356,115.88521590550799 28.67700473894805,115.88521590550799 28.67700473894805)",
        //     num: 0,
        //     province: "江西省",
        //     raddress: null,
        //     rname: "巡逻任务",
        //     rtype: "0",
        //     serid: null,
        //     time: "2021-11-17 00:00:00",
        //     url: "http://223.82.109.183:2081/zhba/upload/20211102/07fe327a76a43fa8d3431c73febade22.jpg",
        // }
        data: {},

        mapPositionLoding: false, //定位loding
        oncePosition: null, //一次定位实例
        onPosition: false, //持续定位指示
    },
    methods: {
        openAPP(type) {
            // console.log(type)
            let that = this;
            if (type != 1) {
                //反馈
                uni.navigateTo({
                    url: '/pages/grabOrders/feedback?data=' + JSON.stringify(this.data)
                });
                if (that.data.butCT == "beginUp") {
                    // 反馈
                    uni.navigateTo({
                        url: '/pages/grabOrders/feedback?data=' + JSON.stringify(this.data)
                    });
                } else if (that.data.butCT == "begin") {
                    // 开始任务
                    // uni.navigateTo({
                    //     url: '/pages/grabOrders/feedback?data=' + JSON.stringify(this.data)
                    // });
                }
            } else {
                this.$confirm('是否参与活动：' + this.data.rname + "?", '提示', {
                    confirmButtonText: '确定',
@@ -69,50 +62,30 @@
                    center: true,
                    customClass: "customClass"
                }).then(() => {
                    let url = "http://223.82.109.183:2082/api" + "/taskqd/Graborder",
                    let url = that.data.appenUrl + "taskqd/Graborder",
                        dataAppend = that.data;
                    axios.post(url, dataAppend).then(res => {
                        // console.log(res);
                        if (res.data.msg == "抢单成功") {
                            that.data.type = 0;
                            that.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            return;
                        }
                        that.$message({
                            message: res.data.msg,
                            type: 'warning'
                        });
                    })
                    console.log(url, dataAppend)
                    // axios.post(url, dataAppend).then(res => {
                    //     // console.log(res);
                    //     if (res.data.msg == "抢单成功") {
                    //         that.data.type = 0;
                    //         that.$message({
                    //             message: res.data.msg,
                    //             type: 'success'
                    //         });
                    //         return;
                    //     }
                    //     that.$message({
                    //         message: res.data.msg,
                    //         type: 'warning'
                    //     });
                    // })
                }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });
                });
                // return;
                //抢单
                // console.log(this.data)
                // let up = this.data.appenUrl == '/api' ? "http://192.168.0.107:85" : this.data.appenUrl;
                // let url = "http://223.82.109.183:2082/api" + "/taskqd/Graborder",
                //     dataAppend = this.data;
                // axios.post(url, dataAppend).then(res => {
                //     console.log(res);
                //     if (res.data.msg == "抢单成功") {
                //         this.data.type = 0;
                //         this.$message({
                //             message: res.data.msg,
                //             type: 'success'
                //         });
                //         return;
                //     }
                //     this.$message({
                //         message: res.data.msg,
                //         type: 'warning'
                //     });
                // })
            }
        },
        getDataList() {
@@ -121,43 +94,43 @@
        },
        beginCome() {
            var data = {
                city: "无数据",
                content: "无数据",
                district: "无数据",
                id: 5,
                integral: "14",
                jnum: 2,
                line: "LINESTRING(115.88518439579809 28.67705200351289,115.89115548582284 28.677382855466767,115.89148633777671 28.675523782583074,115.88565704144649 28.675145666064356,115.88521590550799 28.67700473894805,115.88521590550799 28.67700473894805)",
                num: 2,
                province: "无数据",
                raddress: "",
                rname: "无数据",
                appenUrl: "http://192.168.0.108:83/",
                butCT: "begin",
                buttype: 0,
                captain: "我",
                city: "南昌市",
                content: "测试",
                district: "西湖区",
                id: 37,
                integral: "222",
                iscation: "0",
                jnum: 3,
                line: "LINESTRING(115.8995839881188 28.687205773173343,115.89391916267935 28.678966027079593,115.90404718391959 28.673644524394046,115.91211526863638 28.681369286356936)",
                num: 1,
                nums: 0,
                province: "江西省",
                publisher: "管理",
                raddress: null,
                rname: "测试1",
                rtype: "0",
                serid: "1123598821738675201,",
                time: "无数据",
                url: "http://223.82.109.183:2081/zhba/upload/20211102/07fe327a76a43fa8d3431c73febade22.jpg",
                buttype: "0",
                type:'1'
                team: "你,他,它",
                time: "2022-02-18 14:15:52",
                type: "0",
                url: "http://223.82.109.183:2081/zhba/upload/20220218/67f0c8bf3e7b5024c64133691f265072.ico",
            }
            //url解码
            this.data = this.getQueryVariable('data') || data;
            // this.getdata = data;
            // this.changeDom(this.getdata[0]);//改变地图高度
            // console.log(this.getdata[0]);
            if (this.data.team) {
                this.data.team = this.data.team.split(',');
            }
            console.log(this.data)
            let lines = this.data.line
            let position = lines.slice(lines.indexOf("(") + 1, lines.indexOf(",")).split(" ");
            // console.log(position)
            // return
            this.map = this.beginMap(this.map, position); //创建并接受map
            // this.move = new myDomMove('#seedata', '.title', '#map');
            this.map.invalidateSize(true); //应用地图高度
            // this.move.followFinger(this.map, 'down');
            // this.lat = data[0].wd;
            // this.lng = data[0].jd;
            // this.oldlat = data[0].wd;
            // this.oldlng = data[0].jd;
            // this.oldlat = this.getdata[0].wd;
            // this.oldlng = this.getdata[0].jd;
        },
        changeDom(data) {
            // console.log(data, 'changeDom');
@@ -360,8 +333,51 @@
        // },
        //定位当前位置
        locationMap() {
            // console.log([this.lat, this.lng])
            this.map.setView([this.lat, this.lng], 20);
            let that = this;
            if (!this.oncePosition) {
                this.oncePosition = new $getPositions({
                    id: 1,
                    fn: function(res) {
                        console.log(res);
                        that.mapPositionLoding = res.state;
                        if (!res.state) {
                            that.addIcon(res.intlat);
                        }
                    }
                }).init();
            }
            if (!this.onPosition) {
                this.oncePosition.continued();
                this.onPosition = !this.onPosition;
            } else {
                this.oncePosition.overContinued();
                this.onPosition = !this.onPosition;
            }
        },
        //添加图标
        addIcon(intlat) {
            var markers = L.markerClusterGroup(),
                marker;
            var transportIcon = L.Icon.extend({ //图标初始化
                options: {
                    iconSize: [30, 30], // 图标尺寸
                }
            });
            var carIcon = new transportIcon({ //引入图标
                iconUrl: './img/dinw/dinw1.png'
            });
            var setData = (a) => { //定义图标
                marker = L.marker(a, {
                    icon: carIcon,
                    myData: { //自定义数据
                        ...a
                    }
                });
            }
            setData(intlat)
            markers.addLayer(marker);
            this.map.addLayer(markers);
            this.map.setView(intlat, this.map._zoom);
        },
        toJQposition() {
            this.map.setView([this.oldlat, this.oldlng], 20);
@@ -384,6 +400,7 @@
                that.lat = position.lat; //
                that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑 
                that.haveShishiweizhi++; //控制只执行一次
                console.log(position)
                // console.log(that.haveShishiweizhi)
                if (that.haveShishiweizhi == 2) {
                    // console.log(position)
@@ -534,38 +551,92 @@
            for (let k in line) {
                line[k] = line[k].split(" ").reverse();
            }
            // console.log(line)

            // var latlngs = [
            //     ['28.67705200351289', '115.88518439579809'],
            //     ['28.68755200354289', '115.88518439574809'],
            //     ['28.68755200354289', '115.85518439574809'],
            // ]
            // var polygon = L.polygon(latlngs, {
            //     color: '#000eff',
            //     fillColor: '#0000ed',
            //     weight: 2
            // });
            var polyline = L.polyline(line, {
                color: '#FC5E20'
            })
            // let point = L.circle([28.67705200351289,115.88518439579809],{color:'#FF0000',fillColor:'#FF0000',radius:1000000,fillOpacity:1});
            map.addLayer(polyline)
        },
        checkDomHeight(data) {
            //  声明定时器
            var timer = null;
            //  检查dom是否执行完成
            function checkDom() {
                let useData;
                if (data.domName == 'not') {
                    useData = this[data.name];
                } else {
                    let dom = document[data.domName](data.name);
                    useData = dom;
                }
                if (useData) {
                    //  执行dom加载完成后的操作
                    //  清除定时器
                    if (!timer) {
                        clearTimeout(timer);
                    }
                    if (data.fn) {
                        //回调函数
                        data.fn(useData);
                        return;
                    } else {
                        return dom;
                    }
                } else {
                    //  自我调用
                    timer = setTimeout(checkDom, 200);
                }
            }
            //  首次执行
            checkDom();
        }
    },
    created() {},
    mounted() {
        let that = this;
        this.getDataList();
        // var time = setInterval(() => {
        //     if (this.haveShishiweizhi == 1) {
        //         this.getLocationData();
        //         // console.log(this.haveShishiweizhi)
        //map适应任务详情高度
        // console.log(document.getElementById("map"))
        //因为按钮使用v-if所以在识别高度时候，but还没渲染所以手动添加 56px 不会变
        let UmainHeight = document.getElementById("Umain").clientHeight + 56;
        let h = document.getElementById("mapVue").clientHeight;
        this.checkDomHeight({
            domName: "getElementById",
            name: "map",
            fn: function(dom) {
                dom.style.height = h - UmainHeight + "px";
                document.getElementsByClassName("dingwei")[0].style.bottom =
                    UmainHeight + 10 + "px";
                that.map.invalidateSize(true);
            }
        })
        //开启滑动
        //计算最小单位
        let rows = document.getElementsByClassName("once"),
            rowsHeight = 45;
        for (let ri = 0; ri < 3; ri++) {
            rowsHeight += rows[ri].clientHeight;
        }
        this.domMove = new $moveWindow({
            id: "Umain",
            minHeight: rowsHeight,
            maxHeight: UmainHeight,
            critical: (UmainHeight - rowsHeight) / 4,
            openAnimation: false,
            fn: function(res) {
                // console.log(that.map.options)

        //     } else if (this.haveShishiweizhi == 2) {
        //         clearInterval(time);
        //         time = null;
        //     }
        // }, 1000)
                document.getElementById("map").style.height = h - res.height + "px";
                // that.map.setView([that.map.options.center[0], +that.map.options.center[1] + 0.002], that.map
                //     .options.zoom);
                // console.log(h - res.height)
                if (res.state === true || res.state === false) {
                    that.map.invalidateSize(true);
                }
                document.getElementsByClassName("dingwei")[0].style.bottom = res.height + 10 + "px";
            },
        });
        this.domMove.init();
    },
    wacth: {}
})

 public/grabOrdersMap/xcxmap.html

@@ -55,6 +55,11 @@
        <!-- sha1加密 -->
        <!-- <script src="./js/sha1.js"></script> -->
        <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
        <!-- 高德地图路线规划 -->
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221">
        </script>
        <!-- myDomMove -->
        <script src="./js/getPosition.js"></script>
    </head>

    <body>
@@ -70,7 +75,8 @@
                </div>
            </div>
            <div class="dingwei" @click="locationMap">
                <img style="width: 60%" src="./img/dingwei.png" alt="">
                <img v-show="!mapPositionLoding" style="width: 60%" src="./img/dingwei.png" alt="">
                <img v-show="mapPositionLoding" style="width: 60%" src="./img/dingwei.png" alt="">
            </div>
            <!-- <div class="shuaxin" @click="refreshMap">
                <img style="width: 60%" src="./img/刷新.png" alt="">
@@ -97,7 +103,7 @@
                </div>
                <div class="once">
                    <span class="once-left">
                        任务标题：
                        任务标题
                    </span>
                    <span class="once-right">
                        {{data.rname}}
@@ -105,7 +111,7 @@
                </div>
                <div class="once">
                    <span class="once-left">
                        任务内容：
                        任务内容
                    </span>
                    <span class="once-right">
                        {{data.content}}
@@ -113,7 +119,15 @@
                </div>
                <div class="once">
                    <span class="once-left">
                        任务地区：
                        发布者
                    </span>
                    <span class="once-right">
                        <span>{{data.publisher}}</span>
                    </span>
                </div>
                <div class="once">
                    <span class="once-left">
                        任务地区
                    </span>
                    <span class="once-right">
                        {{data.province}}&nbsp;-&nbsp;{{data.city}}&nbsp;-&nbsp;{{data.district}}
@@ -121,7 +135,7 @@
                </div>
                <div class="once">
                    <span class="once-left">
                        开始时间：
                        开始时间
                    </span>
                    <span class="once-right">
                        {{data.time}}
@@ -129,20 +143,38 @@
                </div>
                <div class="once">
                    <span class="once-left">
                        人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：
                        人数
                    </span>
                    <span class="once-right">
                        {{data.num}}&nbsp;/&nbsp;{{data.jnum}}
                    </span>
                </div>
                <div class="once-c">
                    <!-- <el-button :type="data.type==1?'success':'primary'" >{{data.type==1?'我参与':'我反馈'}}</el-button> -->
                    <!-- <el-button :type="data.num==data.jnum?'info':(data.type==1?'success':'primary')" @click="openAPP(data.type)" :disabled="data.num==data.jnum">{{data.num==data.jnum?"人数已满":(data.type==1?'我参与':'我反馈')}}</el-button> -->
                    <el-button
                        :type="data.buttype==1?(data.num==data.jnum||data.type==1?'info':'success'):'primary'"
                        @click="openAPP(data.buttype)"
                <div class="once">
                    <span class="once-left">
                        队长
                    </span>
                    <span class="once-right">
                        <span>{{data.captain}}</span>
                    </span>
                </div>
                <div class="once">
                    <span class="once-left">
                        参与者
                    </span>
                    <span class="once-right">
                        <span v-for="(item,index) in data.team">{{item}}</span>
                    </span>
                </div>
                <div class="once-c" v-if="data.buttype == 0">
                    <el-button :type="data.butCT == 'beginUp'?'primary':data.butCT == 'begin'?'success':'info'"
                        @click="openAPP(data.buttype)" :disabled="data.butCT== 'over' || data.iscation == '0'">
                        {{data.butCT == 'beginUp'?(data.iscation == '0'?'正在进行':'上传反馈'):data.butCT == 'begin'?(data.iscation == '0'?'还未开始':'开始任务'):'任务完成'}}
                    </el-button>
                </div>
                <div class="once-c" v-if="data.buttype == 1">
                    <el-button :type="data.num==data.jnum?'info':'success'" @click="openAPP(data.buttype)"
                        :disabled="(data.num==data.jnum)&& data.buttype==1 ||data.type == 1">
                        {{data.buttype==1?(data.num==data.jnum?"人数已满":'我参与'):(data.type == 1?'完成反馈':'上传反馈')}}
                        {{data.num==data.jnum?"人数已满":'我参与'}}
                    </el-button>
                </div>
            </div>