1.警情点击当前位置时，地图定位到当前位置点 2.警情信息调整，样式修改，信息上下拉动bug修复

Administrator

2021-06-17 ffc9f497ed62c2d0814dfdf64c80c2f8fd8a769f

1.警情点击当前位置时，地图定位到当前位置点
2.警情信息调整，样式修改，信息上下拉动bug修复

 pages/myself/myself.vue

@@ -230,6 +230,7 @@
                                },
                                success: (data) => {
                                    that.useimg = JSON.parse(data.data).data;
                                    that.$store.state.avatar = that.useimg;
                                    //修改用户头像信息
                                    uni.request({
                                        url:"http://s16s652780.51mypc.cn/api/blade-user/updateUserInfo",

 xcxMapJQ/css/body.css

@@ -1,9 +1,17 @@
page {
    width: 100%;
    height: 100%;
    background-color: rgb(138, 138, 138, 0.1);
}

body {
    padding: 0;
    margin: 0;
}

html, body, #mapVue {
html,
body,
#mapVue {
    width: 100%;
    height: 100%;
}
@@ -36,13 +44,11 @@
}

#seedata {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 70%;
    height: 50%;
    z-index: 400;
    background-color: #fff;
    /* opacity: 0.9; */
    display: flex;
    flex-direction: column;
    border-radius: 60px 60px 0 0;
@@ -50,33 +56,33 @@

.title {
    width: 100%;
    height: 20%;
    /* border: 1px solid springgreen; */
    border-radius: 60px 60px 0 0;
    position: relative;
    /* top: -3%; */
    height: 70px;
    border-radius: 30px 30px 0 0;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    z-index: 101;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.title-span {
    height: 15%;
.device-name {
    letter-spacing: 2px;
    font-size: 15px;
}

/* .title::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border: springgreen solid 1px;
} */
.device-number {
    margin-top: 5px;
    letter-spacing: 0.5px;
    color: #808080;
    font-size: 13px;
}

.main {
    width: 95%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
@@ -85,47 +91,110 @@
    border-top: 1px solid rgb(138, 138, 138);
}

.f-m-once {
    /* border: 1px solid rgb(194, 142, 0); */
.div-alarm-people {
    width: 96%;
    height: 25%;
    margin-left: 2%;
    /* height: 80px; */
}

.div-alarm-people .f-m-once {
    border-bottom: 1px solid rgb(243, 243, 243);
    align-items: center;
    width: 100%;
    height: 100%;
    height: 50%;
    display: flex;
    margin: auto;
}

.div-alarm-people .f-m-o-t-img {
    width: 20px;
    height: 20px;
    float: left;
}

.div-alarm-people .f-m-o-title {
    font-size: 14px;
    margin-left: 10px;
    float: left;
}

.div-alarm-people .f-m-once-phone-number {
    /* border-bottom: 1px solid rgb(128, 128, 128, 0.1); */
    align-items: center;
    width: 100%;
    height: 50%;
    display: flex;
    margin: auto;
}

.div-alarm-people .f-m-once-alarm-type {
    /* border-bottom: 1px solid rgb(128, 128, 128, 0.1); */
    align-items: center;
    width: 100%;
    height: 50%;
    display: flex;
    margin: auto;
}

.div-alarm-people .f-m-once-desc {
    /* border-bottom: 1px solid rgb(128, 128, 128, 0.1); */
    width: 100%;
    height: 50% !important;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 8px 0
}

.f-m-o-title {
.div-alarm-people .f-m-o-t-img-desc {
    width: 20px;
    height: 20px;
    float: left;
}

.div-alarm-people .f-m-o-title-desc {
    display: flex;
    align-items: center;
    width: 40%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    margin-left: 10px;
    float: left;
}

.f-m-o-t-img {
    width: 30px;
    height: 30px;
    padding-right: 10px;
.div-alarm-people .f-m-o-center {
    font-size: 14px;
    position: absolute;
    left: 135px;
    color: #808080;
}

.f-m-o-center {
    width: 60%;
.div-alarm-people .f-m-o-center-desc {
    width: 200px;
    word-wrap: break-word;
    line-height: 1.5;
    /* height: 60px; */
    /* background-color: rgb(46, 118, 228); */
    font-size: 14px;
    position: absolute;
    left: 135px;
    color: #808080;
}

.el-divider {
    margin: 0 auto;
    width: 90%;
.interval {
    width: 100%;
    height: 2%;
    background-color: rgb(243, 243, 243);
}

.but {
    width: 100%;
    height: 19%;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding-top: 5px;
}

.buta {
    /* border: 1px solid #4D7CEE; */
}

.shipingPopup {
@@ -154,21 +223,24 @@
    height: 50px;
}


/* video::-webkit-media-controls-timeline {
    display: none;
} */

.butb {
    width: 80px;
    height: 80px;
    border: 1px solid rgb(46, 118, 228);
    width: 200px;
    height: 40px;
    /* border: 1px solid rgb(46, 118, 228); */
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-image: linear-gradient(to bottom, #3CA7F4, #4D7CEE);
    /* background-image: linear-gradient(to bottom, #3CA7F4, #4D7CEE); */
    background-image: linear-gradient(to bottom, #00BFFF, #4D7CEE);
}


/* .resultFeedback {
    position: fixed;
@@ -182,6 +254,7 @@
    align-items: center;
    justify-content: center;
} */


/* .b-r-main {
    width: 90%;
@@ -220,19 +293,20 @@
}
.b-r-i-o-ups{
    /* align-items: center; */


}
.b-r-m-i-o-c-img {
    width: 50px;
    height: 50px;
}
.b-r-m-but{
.b-r-m-but {
    position: relative;
    left: calc(50% - 40px);
} */
.butc {
}
*/ .butc {
    /* border: 1px solid #4D7CEE; */
}

.b-b-img {
    width: 40px;
    height: 40px;

 xcxMapJQ/js/move.js

@@ -3,36 +3,36 @@
    this.m = $(dom);
    this.div = $(div);
    this.mapId = $(map);
    this.__xx = null;//鼠标实时位置
    this.__xx = null; //鼠标实时位置
    this.__yy = null;
    this.__sx = null;//鼠标开始位置
    this.__sx = null; //鼠标开始位置
    this.__sy = null;
    this.__dx = null;//dom位置
    this.__dx = null; //dom位置
    this.__dy = null;
    this.mapH = null;//地图高度
    this.__wy = null;//屏幕高度
    this.state = "up";//dom状态默认up
    this.mapH = null; //地图高度
    this.__wy = null; //屏幕高度
    this.state = "up"; //dom状态默认up

    this.getMosePosition = (x, y) => {//获取鼠标位置
    this.getMosePosition = (x, y) => { //获取鼠标位置
        this.__sx = x;
        this.__sy = y;
        // console.log(this.__sy, '鼠标开始');

    }
    this.getDomPosition = () => {//获取dom位置
    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 = () => {//获取地图高度
    this.getMapHeight = () => { //获取地图高度
        var that = this;
        this.mapId.css("height", (index, value) => {
            that.mapH = parseFloat(value);
        })
        // console.log(that.mapH, 'map位置');
                that.mapH = parseFloat(value);
            })
            // console.log(that.mapH, 'map位置');
    }
    this.changeDomPosition = (x, y, dy) => {//改变dom位置
    this.changeDomPosition = (x, y, dy) => { //改变dom位置
        var that = this;
        // this.mapId.css("height", (index, value) => {//改变地图高度
        //     var h = this.mapH + y;
@@ -45,81 +45,86 @@


    //begin
    this.followFinger = (map, state = 14) => {//(地图实例，dom状态判断是向上还是向下)
    this.followFinger = (map, state = 14) => { //(地图实例，dom状态判断是向上还是向下)
        // console.log('开始跟随手指');
        var that = this;
        if(state != 14){
        if (state != 14) {
            that.state = state;
            // console.log(that.state);
        }
        that.getDomPosition();//获取dom位置
        that.getMapHeight();//获取地图高度
        that.getDomPosition(); //获取dom位置
        that.getMapHeight(); //获取地图高度
        var once = true;
        that.div.on('touchmove', function (e) {//获取鼠标位置
        that.div.on('touchmove', function(e) { //获取鼠标位置
            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//鼠标移动距离y
            var h = that.__yy - that.__sy //鼠标移动距离y

            if (that.state == 'down') {//两种模式
            if (that.state == 'down') { //两种模式
                // console.log(that.state);
                if (h >= 0 && h + that.__dy <= that.__wy - 20) {
                    that.changeDomPosition(0, h, h + that.__dy);//改变位置
                    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);//改变位置
                    that.changeDomPosition(0, h, h + that.__wy - 20); //改变位置
                    // console.log(that.state,h + that.__wy - 20,112);
                }
            }

        });
        that.div.on('touchend', function () {//抬起重置
            once = true;//抬起重置鼠标点击位置
            if (that.state == 'down') {//两种模式
                var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 8;
        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 / 8;
                // var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
                chous = (that.__sy - that.__yy) < 0;
            }
            if (chous) {
                that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 2.999));//改变位置
            if (!chous) {
                //改变dom位置
                that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 3.999));
                // that.getDomPosition();//抬起获取dom位置/持续停留使用
                that.state = 'down';
                $('#map').css("height", (index, value) => {//改变地图高度
                $('#map').css("height", (index, value) => { //改变地图高度
                    return '50%';
                })
                map.invalidateSize(true);//应用地图高度
                map.invalidateSize(true); //应用地图高度
            } else {
                that.changeDomPosition(0, 0, that.__wy - 80);//改变位置
                // that.changeDomPosition(0, 0, that.__wy - 50); //改变位置
                that.changeDomPosition(0, 0, that.__wy); //改变位置
                // that.getDomPosition();//抬起获取dom位置/持续停留使用
                that.state = 'up';
                $('#map').css("height", (index, value) => {//改变地图高度
                $('#map').css("height", (index, value) => { //改变地图高度
                    return '100%';
                })
                map.invalidateSize(true);//应用地图高度
                map.invalidateSize(true); //应用地图高度
            }
            that.getMapHeight();//抬起获取map高度
            that.getMapHeight(); //抬起获取map高度
        });
    }
    this.destruction = () => {//初始化销毁
    this.destruction = () => { //初始化销毁
        this.m = $(dom);
        this.div = $(div);
        this.mapId = $(map);
        this.__xx = null;//鼠标实时位置
        this.__xx = null; //鼠标实时位置
        this.__yy = null;
        this.__sx = null;//鼠标开始位置
        this.__sx = null; //鼠标开始位置
        this.__sy = null;
        this.__dx = null;//dom位置
        this.__dx = null; //dom位置
        this.__dy = null;
        this.mapH = null;//地图高度
        this.__wy = null;//屏幕高度
        this.state = "up";//dom状态默认up
        this.mapH = null; //地图高度
        this.__wy = null; //屏幕高度
        this.state = "up"; //dom状态默认up
        this.div.off();
    }
}

 xcxMapJQ/js/vueMain.js

@@ -1,29 +1,25 @@
var me = new Vue({
    el: '#mapVue',
    data: {
        map: null,//map
        map: null, //map
        getdata: null,
        marker: null,
        layuiLayer: null,
        nowIndex: null,
		
        LXdhStart: null,
        LXdhEnd: null,
        LxdhLine: null,

        LXdhStart: null,
        LXdhEnd: null,
        LxdhLine: null,

        activeName: 'first',

        move: null,//存放移动实例
		
        //存放实时坐标
        lat: "",
        lng: "",
		
        move: null, //存放移动实例

        //存放实时坐标
        lat: "",
        lng: "",
        seedata: '',

        nowPosition: '',

        shipingPopupShow: false,
        shipingM3u8Url: '',
        resultFeedbackPopupShow: false,
@@ -32,60 +28,42 @@
    methods: {
        getDataList() {
            var that = this;
            // var url = 'https://web.byisf.com/api/blade-jfpts/equipment/equipment/listAll';
            // axios.get(url).then((res) => {
            //     that.getdata = res.data.data;
                // console.log(that.getdata)
                that.beginCome();
            // })
            that.beginCome();
        },
        beginCome() {
            var data = [{
                "id": '100000',
                "place": '无数据',
                "state": '0',
                "dtype": '0',
                "size": '300',
                "jd": "115.822311",
                "wd": "28.646341"
            }]
            this.getdata = this.getQueryVariable('data') || data;//url解码
            console.log(this.getdata)
            // this.getdata = [{
            //     jd: 115.91042800000002,
            //     wd: 28.68094757898212,
            //     state: 0,
            //     dtype: 0,
            //     size: 300,
            //     title: '第一个'
            // }];//url解码
            this.map = this.beginMap(this.map, this.getdata);//创建并接受map
                    "id": '100000',
                    "place": '无数据',
                    "state": '0',
                    "dtype": '0',
                    "size": '300',
                    "jd": "115.822311",
                    "wd": "28.646341"
                }]
                //url解码
            this.getdata = this.getQueryVariable('data') || data;
            this.map = this.beginMap(this.map, this.getdata); //创建并接受map
            this.move = new myDomMove('#seedata', '.title', '#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.map.invalidateSize(true); //应用地图高度
            this.move.followFinger(this.map, 'down');
        },
        //url解码
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return JSON.parse(decodeURI(pair[1])); }//解码url 和 JSON
                if (pair[0] == variable) { return JSON.parse(decodeURI(pair[1])); } //解码url 和 JSON
            }
            return (false);
        },
        beginMap(map, data) {
            var that = this,
                center = [data[0].wd, data[0].jd],
                url = `/api/blade-jfpts/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
            // console.log(center)
                url = `http://s16s652780.51mypc.cn/api/blade-jfpts/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
            // url = `http://localhost:89/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
            this.nowPosition = center;
            axios.post(url).then((res) => {
                // console.log(res)
                if (res.data.data.length != 0) {
                    var dat = res.data.data[0];
                    for (var key in dat) {
@@ -98,14 +76,12 @@
                } else {
                    this.seedata = data[0];
                }
                // console.log(this.seedata, 1524545453)
            })


            var createMap = () => {
                map = L.map('map', { //初始化地图
                    center: center,
                    zoom: 12,
                    zoom: 20,
                    minZoom: 2,
                    maxZoom: 17,
                    attributionControl: false, //去掉右下角
@@ -113,12 +89,8 @@
                });
                L.tileLayer( //添加切片图层
                    // "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", {//顺丰地图
                    "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", {//顺丰地图
                    // "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {

                    // subdomains: ["1", "2", "3", "4"],
                    // attribution: "高德"
                }
                    "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", { //顺丰地图
                    }
                ).addTo(map);
            }
            createMap();
@@ -127,218 +99,151 @@
            var transportIcon = L.Icon.extend({ //图标初始化
                options: {
                    iconSize: [30, 30], // 图标尺寸
                    // iconAnchor: [30, 30], // 图标偏移量
                    // popupAnchor: [-20, -20] // 弹出框偏移量
                }
            });
            var carIcon = new transportIcon({ //引入图标
                iconUrl: './img/gray.png'
            }),
                    iconUrl: './img/gray.png'
                }),
                planeIcon = new transportIcon({
                    iconUrl: './img/green.png'
                }),
                busIcon = new transportIcon({
                    iconUrl: './img/red.png'
                });
            // console.log(data, 43545343)
            var setData = (a) => {//定义图标
            var setData = (a) => { //定义图标
                marker = L.marker([a.wd, a.jd], {
                    icon: planeIcon, 
                    icon: planeIcon,
                    // icon: a.dtype == 0 ? carIcon : a.dtype == 1 ? planeIcon : a.dtype == 2 ? busIcon : '',
                    // title: title,
                    myData: {//自定义数据
                    myData: { //自定义数据
                        ...a
                    }
                });
            }
            for (var i = 0; i < data.length; i++) {
                var a = data[i];
                // var title = a.title;
                // if (a.dtype == 0) {
                //     setData(a);
                // } else if (a.dtype == 1) {
                //     setData(a);
                // } else if (a.dtype == 2) {
                //     setData(a);
                // }
                if (a.jd == '' || a.wd == '') {
                    console.log('没有坐标', i)
                } else {
                    setData(a);
                    that.getDHLine(a.jd,a.wd);
                    that.getDHLine(a.jd, a.wd);
                }
                // marker.bindPopup(title);
                markers.addLayer(marker);
            }
            map.addLayer(markers);

            markers.on('click', function (a) {
            markers.on('click', function(a) {
                // that.drawer = true;
                that.seedata = a.layer.options.myData;
                that.nowPosition = [that.seedata.wd,that.seedata.jd]
                console.log(that.seedata)
                that.nowPosition = [that.seedata.wd, that.seedata.jd]
                $('#seedata').css('top', '');
                $('#map').css("height", (index, value) => {//改变地图高度
                $('#map').css("height", (index, value) => { //改变地图高度
                    return '50%';
                })
                map.invalidateSize(true);//应用地图高度
                // console.log(a.layer.options.myData);
                map.invalidateSize(true); //应用地图高度
                that.move.destruction();
                that.move.followFinger(map, 'down');

            });
            // that.seedata = data[0];
            this.nowPosition = center;
            // map.on('mousemove', (e) => {//实时显示坐标
            //     let latlng = e.latlng;
            //     console.log(latlng);// {lat: 30.59, lng: 114.32}
            // });
            return map;//抛出map
            return map; //抛出map
        },
        getDHLine(x, y) {
		
            var that = this;
		
            //获取导航信息
            axios({
                method: "get",
                url: `https://web.byisf.com/sf/rp/v2/api`,
                params: {
                    ak: "1986afc8a5744263971b7f2482253dfc",
                    x1: that.lng,
                    y1: that.lat,
                    x2: x,
                    y2: y,
                    type: "1",
                    strategy: "0",
                    opt: "sf2"
                },
            }).then((res) => {
                var resdata = res.data.result.coords;
                var data = [];
                for (var i = 0; i < resdata.length; i++) {
                    var xy = [];
                    xy.push(resdata[i][1]);
                    xy.push(resdata[i][0]);
                    data.push(xy);
                }
		
                if (that.LXdhEnd != null) {
                    that.map.removeLayer(that.LXdhEnd);
                }
                if (that.LxdhLine != null) {
                    that.map.removeLayer(that.LxdhLine);
                }
		
                //绘制起点和终点
                that.LXdhEnd = L.markerClusterGroup();
				
                var transportIcon = L.Icon.extend({ //图标初始化
                    options: {
                        iconSize: [56, 32], // 图标尺寸
                    }
                });
		
                var zd = new transportIcon({
                    iconUrl: './img/zd.png'
                });
                // var qd = new transportIcon({
                //     iconUrl: './img/qd.png'
                // });
		
                var qdzb = res.data.result.query;
		
                var x = resdata[resdata.length - 1][0];
                var y = resdata[resdata.length - 1][1];
		
                that.LXdhEnd.addLayer(L.marker([y, x], {
                    icon: zd,
                }));
                // markers.addLayer(L.marker([qdzb.start.y, qdzb.start.x], {
                //     icon: qd,
                // }));
		
                that.map.addLayer(that.LXdhEnd);
		
                that.showPolyLine(data);
            });
        },
        showPolyLine(xy) {
            var that = this;
            that.LxdhLine = L.polyline(xy, {
                color: 'red'
            }).addTo(that.map);
		
            // zoom the map to the polyline
            that.map.fitBounds(that.LxdhLine.getBounds())
        },
        getLocation() {
            // if (navigator.geolocation) {
            //     // console.log(navigator.geolocation)
            //     navigator.geolocation.getCurrentPosition(onSuccess, onError);
               
            // } else {
            //     alert("您的浏览器不支持使用HTML 5来获取地理位置服务");
            // }
        getDHLine(x, y) {

            // function onSuccess(position) {
            //     console.log('纬度: ' + position.coords.latitude + '\n' +
            //         '经度: ' + position.coords.longitude + '\n' +
            //         '海拔: ' + position.coords.altitude + '\n' +
            //         '水平精度: ' + position.coords.accuracy + '\n' +
            //         '垂直精度: ' + position.coords.altitudeAccura)
            // }
            // function onError(error) {
            //     switch (error.code) {
            //         case error.PERMISSION_DENIED:
            //             alert("您拒绝对获取地理位置的请求");
            //             break;
            //         case error.POSITION_UNAVAILABLE:
            //             alert("位置信息是不可用的");
            //             break;
            //         case error.TIMEOUT:
            //             alert("请求您的地理位置超时");
            //             break;
            //         case error.UNKNOWN_ERROR:
            //             alert("未知错误");
            //             break;
            //     }
            // }
            // this.map.locate({
            //     setView: true,
            //     maxZoom: 16
            // });
            // console.log(this.map)
            // this.map.on('locationfound', function (e) {
            //     // var radius = e.accuracy / 2;
            //     // L.marker(e.latlng).addTo(mapid).bindPopup("你就在这个圈内");
            //     // L.circle(e.latlng, radius).addTo(mapid);
            //     console.log(e)
            // });
            var that = this;

            //获取导航信息
            axios({
                method: "get",
                url: `https://web.byisf.com/sf/rp/v2/api`,
                params: {
                    ak: "1986afc8a5744263971b7f2482253dfc",
                    x1: that.lng,
                    y1: that.lat,
                    x2: x,
                    y2: y,
                    type: "1",
                    strategy: "0",
                    opt: "sf2"
                },
            }).then((res) => {
                var resdata = res.data.result.coords;
                var data = [];
                for (var i = 0; i < resdata.length; i++) {
                    var xy = [];
                    xy.push(resdata[i][1]);
                    xy.push(resdata[i][0]);
                    data.push(xy);
                }

                if (that.LXdhEnd != null) {
                    that.map.removeLayer(that.LXdhEnd);
                }
                if (that.LxdhLine != null) {
                    that.map.removeLayer(that.LxdhLine);
                }

                //绘制起点和终点
                that.LXdhEnd = L.markerClusterGroup();

                var transportIcon = L.Icon.extend({ //图标初始化
                    options: {
                        iconSize: [56, 32], // 图标尺寸
                    }
                });

                var zd = new transportIcon({
                    iconUrl: './img/zd.png'
                });
                // var qd = new transportIcon({
                //     iconUrl: './img/qd.png'
                // });

                var qdzb = res.data.result.query;

                var x = resdata[resdata.length - 1][0];
                var y = resdata[resdata.length - 1][1];

                that.LXdhEnd.addLayer(L.marker([y, x], {
                    icon: zd,
                }));
                // markers.addLayer(L.marker([qdzb.start.y, qdzb.start.x], {
                //     icon: qd,
                // }));

                that.map.addLayer(that.LXdhEnd);

                that.showPolyLine(data);
            });
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        showPolyLine(xy) {
            var that = this;
            that.LxdhLine = L.polyline(xy, {
                color: 'red'
            }).addTo(that.map);

            // zoom the map to the polyline
            that.map.fitBounds(that.LxdhLine.getBounds())
        },
        titleClick(){
            this.map.setView(this.nowPosition, 12);
        //定位警情位置
        titleClick() {
            this.map.setView(this.nowPosition, 20);
        },
        locationMap() {//定位
            // this.map.setView(this.nowPosition, 12);//定警情位置
            // this.getLocation();
            // console.log(wx,12);
            // wx.miniProgram.navigateTo({url: 'pages/workbench/workbench'})
        //定位当前位置
        locationMap() {
            this.map.setView([this.lat, this.lng], 20);
        },
        shipingClick(open) {//打开视频
        shipingClick(open) { //打开视频
            if (open) {
                this.openRealVideoBox(this.seedata.serialNumber, this.seedata.channelNumber, this.seedata.deviceNumber, this.seedata.manufacturer);
            } else {
                this.shipingPopupShow = false;
            }
        },
        resultFeedbackClick() {//结果反馈跳转小程序
        resultFeedbackClick() { //结果反馈跳转小程序
            this.gotoxcx('policeDetails');
        },
        openRealVideoBox(serialNumber, channelNumber, deviceNumber, manufacturer) {//获取视频地址
        openRealVideoBox(serialNumber, channelNumber, deviceNumber, manufacturer) { //获取视频地址
            var that = this;
            if (manufacturer == "HK") {
                axios
@@ -361,9 +266,7 @@
                });
                newAxios
                    .post(
                        "/api_control",
                        {},
                        {
                        "/api_control", {}, {
                            params: {
                                param: JSON.stringify({ PktType: "GetAccessToken" }),
                            },
@@ -387,67 +290,65 @@
        },
        gotoxcx(routs) {
            wx.miniProgram.navigateTo({
                url: `../poput/workbench/policeDetails/${routs}?id=${this.seedata.id}`,            //指定跳转至小程序页面的门路
                success: function () {
                    console.log('success');   //页面跳转胜利的回调函数
                url: `../poput/workbench/policeDetails/${routs}?id=${this.seedata.id}`, //指定跳转至小程序页面的门路
                success: function() {
                    console.log('success'); //页面跳转胜利的回调函数
                }
            });
        },
        getLocationData() {
            var that = this;
            var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
            var positionNum = 0;
            var options = {
                timeout: 8000
            };
		
            function showPosition(position) {
                var adCode = position.adCode; //邮政编码
                var nation = position.nation; //中国
                var city = position.city; //城市
                var addr = position.addr; //详细地址
                that.lat = position.lat; //
                that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑 
		
                if (that.LXdhStart != null) {
                    that.map.removeLayer(that.LXdhStart);
                }
		
                //绘制起点和终点
                that.LXdhStart = L.markerClusterGroup();
		
                var transportIcon = L.Icon.extend({ //图标初始化
                    options: {
                        iconSize: [50, 50], // 图标尺寸
                    }
                });
		
                var qd = new transportIcon({
                    iconUrl: './img/dingw.gif'
                });
		
                that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
                    icon: qd,
                }));
		
                that.map.addLayer(that.LXdhStart);
		
            };
		
            function showErr() {
                //TODO 如果出错了调用此方法 
            };
		
            geolocation.getLocation(showPosition, showErr, options);
        },
        getLocationData() {
            var that = this;
            var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
            var positionNum = 0;
            var options = {
                timeout: 8000
            };

            function showPosition(position) {
                var adCode = position.adCode; //邮政编码
                var nation = position.nation; //中国
                var city = position.city; //城市
                var addr = position.addr; //详细地址
                that.lat = position.lat; //
                that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑 

                if (that.LXdhStart != null) {
                    that.map.removeLayer(that.LXdhStart);
                }

                //绘制起点和终点
                that.LXdhStart = L.markerClusterGroup();

                var transportIcon = L.Icon.extend({ //图标初始化
                    options: {
                        iconSize: [50, 50], // 图标尺寸
                    }
                });

                var qd = new transportIcon({
                    iconUrl: './img/dingw.gif'
                });

                that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
                    icon: qd,
                }));

                that.map.addLayer(that.LXdhStart);

            };

            function showErr() {
                //TODO 如果出错了调用此方法 
            };

            geolocation.getLocation(showPosition, showErr, options);
        },

    },
    created() {
    },
    created() {},
    mounted() {
        this.getDataList();
        this.getLocationData();
        this.getLocationData();
    },
    wacth: {
    }
    wacth: {}
})

 xcxMapJQ/xcxmap.html

@@ -2,143 +2,135 @@
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>地图</title>
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>地图</title>
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

    <!-- leaflet支持 -->
    <script src="./lid/leaflet.js"></script>
    <link rel="stylesheet" href="./lid/leaflet.css" />
    <!-- leaflet支持 -->
    <script src="./lid/leaflet.js"></script>
    <link rel="stylesheet" href="./lid/leaflet.css" />

    <!-- leaflet聚合支持 -->
    <link rel="stylesheet" href="./lid/MarkerCluster.css" />
    <link rel="stylesheet" href="./lid/MarkerCluster.Default.css" />
    <script src="./lid/leaflet.markercluster-src.js"></script>
    <!-- leaflet聚合支持 -->
    <link rel="stylesheet" href="./lid/MarkerCluster.css" />
    <link rel="stylesheet" href="./lid/MarkerCluster.Default.css" />
    <script src="./lid/leaflet.markercluster-src.js"></script>

    <!-- layui支持 -->
    <!-- <link rel="stylesheet" href="../map/lib/layui/css/layui.css" media="all"> -->
    <!-- <script src="../map/lib/layui/layui.js" charset="utf-8"></script> -->
	
    <!-- 百度地图api -->
    <script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
    <!-- layui支持 -->
    <!-- <link rel="stylesheet" href="../map/lib/layui/css/layui.css" media="all"> -->
    <!-- <script src="../map/lib/layui/layui.js" charset="utf-8"></script> -->

    <!-- axios支持 -->
    <script src="../map/lib/axios.js"></script>
    <!-- 百度地图api -->
    <script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>

    <!-- elementui -->
    <script src="../map/lib/elementUi.js"></script>
    <!-- <link rel="stylesheet" href="../map/lib/elementUi.css"> -->
    <link rel="stylesheet" href="./css/elementUI.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <!-- axios支持 -->
    <script src="../map/lib/axios.js"></script>

    <!-- jqurey -->
    <script src="../map/lib/jquery.js" charset="utf-8"></script>
    <!-- elementui -->
    <script src="../map/lib/elementUi.js"></script>
    <!-- <link rel="stylesheet" href="../map/lib/elementUi.css"> -->
    <link rel="stylesheet" href="./css/elementUI.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->

    <!-- 微信支持 -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <!-- <script src="./js/wx.js"></script> -->
    <!-- jqurey -->
    <script src="../map/lib/jquery.js" charset="utf-8"></script>

    <!-- omyself支持 -->
    <link rel="stylesheet" href="./css/body.css" />
    <!-- 微信支持 -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <!-- <script src="./js/wx.js"></script> -->

    <!-- myDomMove -->
    <script src="./js/move.js"></script>
    <!-- sha1加密 -->
    <!-- <script src="./js/sha1.js"></script> -->
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <!-- omyself支持 -->
    <link rel="stylesheet" href="./css/body.css" />

    <!-- myDomMove -->
    <script src="./js/move.js"></script>
    <!-- sha1加密 -->
    <!-- <script src="./js/sha1.js"></script> -->
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>

<body>
    <div id="mapVue">
        <div class="dingwei" @click="locationMap">
            <img style="width: 80%;height: 80%;" src="./img/dingwei.png" alt="">
        </div>
        <div id="map"></div>
        <div id="seedata">
            <div class="title" @click="titleClick">
                {{seedata.deviceName}}
                <div class="title-span"> </div>
                {{seedata.deviceNumber}}
                <div class="title-span"> </div>
                <div class="title-span"> </div>
            </div>
            <div class="main">
                <div class="f-m-once">
                    <div class="f-m-o-title">
                        <img class="f-m-o-t-img" src="./img/shiyongren.png" alt="">
                        使用方:
                    </div>
                    <div class="f-m-o-center">{{seedata.deptName}}</div>
                </div>
                <div class="f-m-once">
                    <div class="f-m-o-title">
                        <img class="f-m-o-t-img" src="./img/ren.png" alt="">
                        接警人:
                    </div>
                    <div class="f-m-o-center">{{seedata.alarmPeople}}</div>
                </div>
                <div class="f-m-once">
                    <div class="f-m-o-title">
                        <img class="f-m-o-t-img" src="./img/dianhua.png" alt="">
                        联系电话:
                    </div>
                    <div class="f-m-o-center">{{seedata.phoneNumber}}</div>
                </div>
                <el-divider></el-divider>
                <div class="f-m-once">
                    <div class="f-m-o-title">
                        <img class="f-m-o-t-img" src="./img/shijian.png" alt="">
                        报警时间:
                    </div>
                    <div class="f-m-o-center">{{seedata.alarmTime}}</div>
                </div>
                <div class="f-m-once">
                    <div class="f-m-o-title">
                        <img class="f-m-o-t-img" src="./img/leixing.png" alt="">
                        报警类型:
                    </div>
                    <div class="f-m-o-center">{{seedata.alarmType}}</div>
                </div>
                <el-divider></el-divider>
                <div class="f-m-once">
                    <div class="f-m-o-title">
                        <img class="f-m-o-t-img" src="./img/beizhu.png" alt="">
                        备注:
                    </div>
                    <div class="f-m-o-center">{{seedata.bz}}</div>
                </div>
                <div class="but">
                    <div class="buta" @click="shipingClick(true)">
                        <img class="b-b-img" src="./img/shiping.png" alt="">
                    </div>
                    <!-- 加上display： none不会闪烁 -->
                    <div class="shipingPopup" v-show="shipingPopupShow" style="display: none;">
                        <div class="s-p-main">
                            <div @click="shipingClick(false)">
                                <img src="./img/gaunbi.png" alt="" class="s-p-gaunbi">
                            </div>
                            <!-- <video style="height: 550px; width: 100%" controls="controls"
                                id="real_video_shipingPopup" src=""></video> -->
                            <video style="height: 550px; width: 100%" controls="controls" :src="shipingM3u8Url"></video>
                        </div>
                    </div>
                    <div class="butb" @click="resultFeedbackClick">结果反馈</div>
    <div id="mapVue">
        <div class="dingwei" @click="locationMap">
            <img style="width: 80%;height: 80%;" src="./img/dingwei.png" alt="">
        </div>
        <div id="map">
            <div class="title" @click="titleClick">
                <span class="device-name">{{seedata.deviceName}}</span>
                <span class="device-number">{{seedata.deviceNumber}}</span>
            </div>
        </div>
        <div id="seedata">
            <div class="main">
                <div class="div-alarm-people">
                    <div class="f-m-once">
                        <img class="f-m-o-t-img" src="./img/ren.png" alt="">
                        <div class="f-m-o-title">接警人</div>
                        <div class="f-m-o-center">{{seedata.alarmPeople}}</div>
                    </div>
                    <div class="f-m-once-phone-number">
                        <img class="f-m-o-t-img" src="./img/dianhua.png" alt="">
                        <div class="f-m-o-title">联系电话</div>
                        <div class="f-m-o-center">{{seedata.phoneNumber}}</div>
                    </div>
                </div>

                    <div class="butc">
                        <img class="b-b-img" src="./img/huifang.png" alt="">
                        <!-- <div class="huifangPopup">
                <div class="interval"></div>

                <div class="div-alarm-people">
                    <div class="f-m-once">
                        <img class="f-m-o-t-img" src="./img/shijian.png" alt="">
                        <div class="f-m-o-title">报警时间</div>
                        <div class="f-m-o-center">{{seedata.alarmTime}}</div>
                    </div>
                    <div class="f-m-once-alarm-type">
                        <img class="f-m-o-t-img" src="./img/leixing.png" alt="">
                        <div class="f-m-o-title">报警类型</div>
                        <div class="f-m-o-center">{{seedata.alarmType}}</div>
                    </div>
                </div>
                <div class="interval"></div>

                <div class="div-alarm-people">
                    <div class="f-m-once-desc">
                        <img class="f-m-o-t-img-desc" src="./img/beizhu.png" alt="">
                        <div class="f-m-o-title-desc">备注</div>
                        <div class="f-m-o-center-desc">{{seedata.bz}}</div>
                    </div>
                </div>

                <div class="interval"></div>
                <div class="but">
                    <div class="buta" @click="shipingClick(true)">
                        <img class="b-b-img" src="./img/shiping.png" alt="">
                    </div>
                    <!-- 加上display： none不会闪烁 -->
                    <div class="shipingPopup" v-show="shipingPopupShow" style="display: none;">
                        <div class="s-p-main">
                            <div @click="shipingClick(false)">
                                <img src="./img/gaunbi.png" alt="" class="s-p-gaunbi">
                            </div>
                            <!-- <video style="height: 550px; width: 100%" controls="controls"
                                id="real_video_shipingPopup" src=""></video> -->
                            <video style="height: 550px; width: 100%" controls="controls" :src="shipingM3u8Url"></video>
                        </div>
                    </div>
                    <div class="butb" @click="resultFeedbackClick">结果反馈</div>

                    <div class="butc">
                        <img class="b-b-img" src="./img/huifang.png" alt="">
                        <!-- <div class="huifangPopup">
                            回放
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- vue渲染 -->
    <script src="./js/vueMain.js"></script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- vue渲染 -->
    <script src="./js/vueMain.js"></script>
</body>

</html>

 xcxjingqingmap_patrol/js/move.js

@@ -82,8 +82,6 @@
        });
        that.div.on('touchend', function() { //抬起重置
            console.log("触摸停止")
            console.log(that.__yy, 123)
            console.log(that.__sy, 124)
            once = true; //抬起重置鼠标点击位置
            var chous = null;
            if (that.state == 'down') { //两种模式