路线导航修改

zengh

2021-05-28 08263c2c6a67332f3aaa7658aa0a966e2f14e1da

路线导航修改

 xcxjingqingmap/js/lxdhmap.js

@@ -12,7 +12,7 @@
        mh_query_show: true,

        ZBCXresult: null,
		

        LXdhEnd: null,
        LxdhLine: null,

@@ -56,7 +56,7 @@
            //     return '100%';
            // // })
            this.map.invalidateSize(true); //应用地图高度
            this.move.followFinger(this.map, 'down');
            //this.move.followFinger(this.map, 'down');
        },
        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
@@ -164,15 +164,15 @@

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

            });
            that.seedata = data[0];
@@ -193,6 +193,16 @@
                    console.log('success'); //页面跳转胜利的回调函数
                }
            });
        },
        LXdhJQ() {
            var that = this;
            var jqdata = that.seedata;
            that.getDHLine(jqdata.jd,jqdata.wd);

            $('#map').css("height", (index, value) => { //改变地图高度
                return '100%';
            })
            this.map.invalidateSize(true); //应用地图高度
        },
        lxdhSearch() {
            //var id = this.$store.state.puserID;
@@ -233,78 +243,83 @@
                    var ids = $(this).attr("id");

                    $("#mh_query").html("");
					
                    that.getDHLine(that.ZBCXresult[ids].location.lng,that.ZBCXresult[ids].location.lat);

                    // alert(that.ZBCXresult[ids].name);
                    //获取导航信息
                    axios({
                        method: "get",
                        url: `https://web.byisf.com/sf/rp/v2/api`,
                        params: {
                            ak: "1986afc8a5744263971b7f2482253dfc",
                            x1: "114.95675749182703",
                            y1: "25.84163062532512",
                            x2: that.ZBCXresult[ids].location.lng,
                            y2: that.ZBCXresult[ids].location.lat,
                            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);
                    });

                });
            });

            this.mh_query_show = true;
        },
        getDHLine(x,y){
			
            var that = this;
			
            //获取导航信息
            axios({
                method: "get",
                url: `https://web.byisf.com/sf/rp/v2/api`,
                params: {
                    ak: "1986afc8a5744263971b7f2482253dfc",
                    x1: "114.95675749182703",
                    y1: "25.84163062532512",
                    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;
            var latlngs = [

 xcxjingqingmap/lxdhmap.html

@@ -52,7 +52,6 @@
    <div id="mapVue">
        
        <div id="map"></div>
		
        <div class="lxdh_input_div">
            <input id="lxdh_input" v-model="searchValue" type="text">
            
@@ -64,9 +63,68 @@
        <div id="mh_query" v-if="mh_query_show">
            
        </div>
		
    </div>
    
    <div id="seedata">
        <div class="title">
            {{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/ren.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="butb" @click="LXdhJQ">路线导航</div>
            </div>
        </div>
    </div>
	
    </div>
    
    
    <!-- vue渲染 -->