路线导航修改

zengh

2021-05-27 c28a59f270e3711a498f7dc5adf7d7b9aa119985

路线导航修改

 pages/investigation/investigation.vue

@@ -30,7 +30,7 @@
            }else{
                data = options.data;
            }
            this.urls = "https://web.byisf.com/xcxjingqingmap/xcxmap.html?data=" + data;
            this.urls = "https://web.byisf.com/xcxjingqingmap/lxdhmap.html?data=" + data;
            // this.dataList = data;
            // console.log(this.urls);
        },

 xcxjingqingmap/.idea/.gitignore

File was deleted

 xcxjingqingmap/.idea/misc.xml

File was deleted

 xcxjingqingmap/.idea/modules.xml

File was deleted

 xcxjingqingmap/.idea/xcxjingqingmap.iml

File was deleted

 xcxjingqingmap/css/lxdhmap.css

New file
@@ -0,0 +1,249 @@
body {
    padding: 0;
    margin: 0;
}

html,
body,
#mapVue {
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    z-index: 1;
}

#mapVue {
    overflow: hidden;
    /* border: solid 1px springgreen; */
}

.lxdh_input_div {
    position: fixed;
    z-index: 999;
    top: 30px;
    left: 0;
    right: 0;
    margin: auto;
    width: 250px;
    height: 36px;
}

#lxdh_input {
    outline-style: none;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px 5px;
    width: 200px;
    font-size: 14px;
    font-weight: 500;
    font-family: "Microsoft soft";
}
}

#lxdh_input_ss {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}




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

.title-span {
    height: 15%;
}

/* .title::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border: springgreen solid 1px;
} */

.main {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-top: 1px solid rgb(138, 138, 138);
}

.f-m-once {
    /* border: 1px solid rgb(194, 142, 0); */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 8px 0
}

.f-m-o-title {
    display: flex;
    align-items: center;
    width: 40%;
}

.f-m-o-t-img {
    width: 30px;
    height: 30px;
    padding-right: 10px;
}

.f-m-o-center {
    width: 60%;
}

.el-divider {
    margin: 0 auto;
    width: 90%;
}

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

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

.shipingPopup {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-p-main {
    width: 90%;
    height: 90%;
    /* background-color: #fff; */
}

.s-p-gaunbi {
    position: relative;
    left: 90%;
    width: 50px;
    height: 50px;
}

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

.butb {
    width: 80px;
    height: 80px;
    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);
}

/* .resultFeedback {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 201;
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* .b-r-main {
    width: 90%;
    height: 90%;
}

.b-r-gaunbi {
    position: relative;
    left: 90%;
    width: 50px;
    height: 50px;
}

.b-r-main-in {
    width: 100%;
    height: auto;
    padding-bottom: 20px;
    background-color: #fff;
    border-radius: 10px;
}

.b-r-m-i-once {
    padding: 10px 0 10px 10px;
    display: flex;
    justify-content: space-around;
}

.b-r-m-i-o-title {
    width: 30%;
    position: relative;
    top: 10px;
}

.b-r-m-i-o-center {
    width: 70%;
}
.b-r-i-o-ups{
    /* align-items: center; */
}

.b-r-m-i-o-c-img {
    width: 50px;
    height: 50px;
}

.b-r-m-but {
    position: relative;
    left: calc(50% - 40px);
}

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

.b-b-img {
    width: 40px;
    height: 40px;
    display: block;
    /* border: 1px solid #4D7CEE; */
}

 xcxjingqingmap/img/sous.png

 xcxjingqingmap/js/lxdhmap.js

New file
@@ -0,0 +1,189 @@
var me = new Vue({
    el: '#mapVue',
    data: {
        map: null,//map
        getdata: null,
        marker: null,
        layuiLayer: null,
        nowIndex: null,

        activeName: 'first',

        move: null,//存放移动实例

        seedata: '',

        nowPosition: '',

        shipingPopupShow: false,
        shipingM3u8Url: '',
        resultFeedbackPopupShow: false,
        popupDisplay: "none",
    },
    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;
            that.beginCome();
            // })
        },
        beginCome() {
            this.getdata = this.getQueryVariable('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
            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.move.followFinger(this.map, 'down');
        },
        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
            }
            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}`;
            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) {
                        if (dat[key] == null || dat[key] == '') {
                            dat[key] = '暂无'
                        }
                    }
                    this.seedata = dat;

                } else {
                    this.seedata = data[0];
                }
                // console.log(this.seedata, 1524545453)
            })


            var createMap = () => {
                map = L.map('map', { //初始化地图
                    center: center,
                    zoom: 12,
                    minZoom: 2,
                    maxZoom: 17,
                    attributionControl: false, //去掉右下角
                    zoomControl: false, //去掉缩放
                });
                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: "高德"
                }
                ).addTo(map);
            }
            createMap();
            var markers = L.markerClusterGroup();

            var transportIcon = L.Icon.extend({ //图标初始化
                options: {
                    iconSize: [30, 30], // 图标尺寸
                    // iconAnchor: [30, 30], // 图标偏移量
                    // popupAnchor: [-20, -20] // 弹出框偏移量
                }
            });
            var carIcon = new transportIcon({ //引入图标
                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) => {//定义图标
                marker = L.marker([a.wd, a.jd], {
                    icon: a.dtype == 0 ? carIcon : a.dtype == 1 ? planeIcon : a.dtype == 2 ? busIcon : '',
                    // title: title,
                    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);
                }
                // marker.bindPopup(title);
                markers.addLayer(marker);
            }
            map.addLayer(markers);

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

            });
            that.seedata = data[0];
            // map.on('mousemove', (e) => {//实时显示坐标
            //     let latlng = e.latlng;
            //     console.log(latlng);// {lat: 30.59, lng: 114.32}
            // });
            return map;//抛出map
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        },

        gotoxcx(routs) {
            wx.miniProgram.navigateTo({
                url:`../poput/workbench/policeDetails/${routs}?id=${this.seedata.id}`,            //指定跳转至小程序页面的门路
                success: function(){
                   console.log('success');   //页面跳转胜利的回调函数
                }
             });
        }

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

 xcxjingqingmap/lxdhmap.html

New file
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<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>map</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聚合支持 -->
    <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> -->

    <!-- axios支持 -->
    <script src="../map/lib/axios.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"> -->

    <!-- jqurey -->
    <script src="../map/lib/jquery.js" charset="utf-8"></script>

    <!-- 微信支持 -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <!-- <script src="./js/wx.js"></script> -->

    <!-- omyself支持 -->
    <link rel="stylesheet" href="./css/lxdhmap.css" />

    <!-- myDomMove -->
    <!-- <script src="./js/move.js"></script> -->
    <!-- sha1加密 -->
    <!-- <script src="./js/sha1.js"></script> -->

</head>

<body>
    <div id="mapVue">
		
        <div id="map"></div>
		
        <div class="lxdh_input_div">
            <input id="lxdh_input" type="text">
            <input style="width: 30px;
    height: 30px;vertical-align: middle;" id="lxdh_input_ss" name="submit" type="image" value="ee" src="img/sous.png" />
        </div>
		
    </div>
	
	
	
    <!-- vue渲染 -->
    <script src="./js/lxdhmap.js"></script>
</body>

</html>