路线导航修改

zengh

2021-05-28 08263c2c6a67332f3aaa7658aa0a966e2f14e1da

路线导航修改

 xcxjingqingmap/js/lxdhmap.js

@@ -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;
@@ -234,7 +244,18 @@

                    $("#mh_query").html("");

                    that.getDHLine(that.ZBCXresult[ids].location.lng,that.ZBCXresult[ids].location.lat);

                    // alert(that.ZBCXresult[ids].name);
                });
            });

            this.mh_query_show = true;
        },
        getDHLine(x,y){
			
            var that = this;
			
                    //获取导航信息
                    axios({
                        method: "get",
@@ -243,8 +264,8 @@
                            ak: "1986afc8a5744263971b7f2482253dfc",
                            x1: "114.95675749182703",
                            y1: "25.84163062532512",
                            x2: that.ZBCXresult[ids].location.lng,
                            y2: that.ZBCXresult[ids].location.lat,
                    x2: x,
                    y2: y,
                            type: "1",
                            strategy: "0",
                            opt: "sf2"
@@ -296,14 +317,8 @@
                        
                        that.map.addLayer(that.LXdhEnd);


                        that.showPolyLine(data);
                    });

                });
            });

            this.mh_query_show = true;
        },
        showPolyLine(xy) {
            var that = this;

 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渲染 -->