tqApp-webView/pages/realtimeWatch/module/lzpathPlanning.vue

<template>
    <view class="realtimeWatch">
        <map-container
            ref="mapContainerRef"
            toolMapKey="createPolyline"
            :pointsData="pointsData"
            @handleMarkerClick="handleMarkerClick">
        </map-container>
         <view class="options">
            <view class="options-item" @click="showSatelliteLayer">
                <image
                    style="width: 100%; height: 100%"
                    :src="$getImages('/assetsMobile/images/map/icon/weixing.png')" />
            </view>

        </view>
    </view>
</template>

<script>
import MapContainer from '@/components/MapContainer'

export default {
    components: {
        MapContainer,
    },
    data() {
        return {
            //卫星图层
            isShowStelliteLayer: false,
            pointsData: []
        }
    },
    computed: {
        countInfo() {
            return this.$store.state.realtimeWatch.countInfo
        },
    },
    onLoad() {
        this.pointsData = []
    },
    onReady() {
    },
    methods: {
        // 查询自身位置
        queryLocation() {
            uni.getLocation({
                type: "gcj02",
                success: (res) => {
                    const { latitude, longitude } = res

                    this.$refs.mapContainerRef.setZoomAndCenter(12, [longitude, latitude], true)
                },
                fail: (res) => {
                    console.log('定位失败', JSON.stringify(res));
                }
            });
        },
        //选车辆
        showPanel() {
            this.$refs.panelRef.show()
        },
        //展示卫星图层
        showSatelliteLayer() {
            this.isShowStelliteLayer = !this.isShowStelliteLayer
            if (this.$refs.mapContainerRef) this.$refs.mapContainerRef.setStelliteLayer(this.isShowStelliteLayer)
        },
        //点击标注点
        handleMarkerClick(e) {
            // console.log(e,'handleMarkerClick')
            const { cluster } = e
            let item = cluster.p.item
            this.$refs.vehInfoRef.show(item)

        }
    },
    beforeDestroy() {
        this.$store.dispatch('setVheicleCheckArr', [])
        this.$store.dispatch('setPeopleCheckArr', [])
    }
}
</script>

<style lang="scss" scoped>
.realtimeWatch {
    width: 100%;
    height: 100vh;
    position: relative;

    #map {
        width: 750rpx;
        height: 100%;
    }

    .counts {
        position: absolute;
        left: 2%;
        top: 20rpx;
        width: 96%;
        background: #fff;
        border-radius: 10rpx;

        box-shadow: 0 2px 6px #3f57c252;

        // margin: 10rpx;
        .counts-item {
            padding: 14rpx 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .counts-item-label {
                font-size: 24rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 400;
                color: #333333;
                text-align: center;
            }

            .counts-item-value {
                margin-top: 10rpx;
                font-size: 26rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 600;
                color: #333333;
                text-align: center;
            }
        }
    }

    .options {
        position: absolute;
        width: 72rpx;
        right: 30rpx;
        bottom: 156rpx;
        // box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.15);
        z-index: 9999;

        .options-item {
            height: 72rpx;

        }

        .options-item+.options-item {
            margin-top: 20rpx;
        }
    }
}
</style>