小程序地图

liuyg

2021-05-17 654ddafb692e5279a0ef652be311c1af63301cec

小程序地图

 public/xcxjingqingmap/css/body.css

@@ -60,4 +60,5 @@
.main {
    display: flex;
    justify-content: center;
    border-top: 1px solid rgb(138, 138, 138);
}

 public/xcxjingqingmap/js/vueMain.js

@@ -24,22 +24,23 @@
            // })
        },
        beginCome() {
            // this.getdata = this.getQueryVariable('data');//url解码
            this.getdata = [{
                jd: 115.91042800000002,
                wd: 28.68094757898212,
                state: 0,
                dtype: 0,
                size: 300,
                title: '第一个'
            }];//url解码
            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');
        },
@@ -122,7 +123,7 @@

            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%';
@@ -133,7 +134,7 @@
                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}

 public/xcxjingqingmap/xcxmap.html

@@ -50,19 +50,47 @@
        <div id="map"></div>
        <div id="seedata">
            <div class="title">
                {{seedata.deviceName}}
                {{seedata.place}}
                <!-- {{getdata[0].place}} -->
                <div class="title-span"> </div>
                <div class="title-span"> </div>
            </div>
            <div class="main">
                <div>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
                        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                        <el-tab-pane label="警情信息" name="first">
                            <div class="f-main">
                                <div class="f-m-once">
                                    <div class="f-m-o-title">使用方</div>
                                    <div class="f-m-o-center">{{seedata.place}}</div>
                                </div>
                                <!-- <div class="a">
                                    <div class="b"></div>
                                    <div class="b"></div>
                                </div>
                                <div class="a">
                                    <div class="b"></div>
                                    <div class="b"></div>
                                </div>
                                <div class="a">
                                    <div class="b"></div>
                                    <div class="b"></div>
                                </div>
                                <div class="a">
                                    <div class="b"></div>
                                    <div class="b"></div>
                                </div>
                                <div class="a">
                                    <div class="b"></div>
                                    <div class="b"></div>
                                </div> -->
                            </div>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
                        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
                    </el-tabs>
                    {{seedata.jd}}-{{seedata.wd}}
                    <!-- {{seedata.jd}}-{{seedata.wd}} -->
                </div>
            </div>
        </div>