zx_bms_uni/component/mapControl/mapControl.vue

<template>
    <!-- component/mapControl/mapControl.wxml -->
    <view class="map-control-pannel">
        <view class="map-control-group">
            <view class="map-c-lukuang">
                <image class="map-c-icon" :src="'/static/resource/images/' + (mapParamsClone.enableTraffic ? 'road-2' : 'road-1') + '.png'" @tap="mapTrafficSwitch"></image>
            </view>
            <view class="map-c-item map-c-weixing">
                <image class="map-c-icon" :src="'/static/resource/images/' + (mapParamsClone.enableSatellite ? 'wx-2' : 'wx-1') + '.png'" @tap="mapSatelliteSwitch"></image>
            </view>
        </view>
    </view>
</template>

<script>
// component/mapControl/mapControl.js
export default {
    data() {
        return {
            mapParamsClone: {
                enableTraffic: false,
                enableSatellite: false
            }
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        mapParams: {
            type: Object
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        changeParams: function () {
            this.$emit('changeParams', {
                detail: {
                    mapParams: this.mapParams
                }
            });
        },
        mapTrafficSwitch: function () {
            const mapParams = this.mapParams;
            mapParams.enableTraffic = !mapParams.enableTraffic;
            this.setData({
                mapParamsClone: mapParams
            });
            this.changeParams();
        },
        mapSatelliteSwitch: function () {
            const mapParams = this.mapParams;
            mapParams.enableSatellite = !mapParams.enableSatellite;
            this.setData({
                mapParamsClone: mapParams
            });
            this.changeParams();
        }
    },
    created: function () {},
    watch: {
        mapParams: {
            handler: function (newVal, oldVal) {
                this.mapParamsClone = newVal;
            },

            immediate: true,
            deep: true
        }
    }
};
</script>
<style>
@import './mapControl.css';
</style>