<template>
    <native-view ref="tencentMapElement" @init="onInit">
    </native-view>
</template>
<script setup>
    import { TencentMap } from '@/uni_modules/tencent-map';
    const props = withDefaults(defineProps<{
        /**
         * 地图key
         */
        mapKey : string
        /**
         * 纬度，浮点数，范围 -90 ~ 90
         */
        latitude ?: number
        /**
         * 经度，浮点数，范围 -180 ~ 180
         */
        longitude ?: number
        /**
         * 地图缩放级别
         */
        scale ?: number
        /**
         * 是否开启卫星图
         */
        enableSatellite : boolean
        /**
         * 是否开启实时路况
         */
        enableTraffic : boolean
        /**
         * 是否展示 POI 点
         */
        enablePoi : boolean
        /**
         * 是否展示建筑物
         */
        enableBuilding : boolean
    }>
        (), {
        mapKey: '',
        mapType: 0,
        enableSatellite: false,
        enableTraffic: false,
        enablePoi: false,
        enableBuilding: false
    })
    const tencentMap : TencentMap = new TencentMap()
    function onInit(el : UniNativeViewInitEvent) {
        tencentMap.setup(props.mapKey, el.detail.element)
        watchEffect(() => {
            const scale = props.scale
            if (scale != null) {
                tencentMap.setScaleLevel(scale)
            }
        })
        watchEffect(() => {
            tencentMap.setSatelliteEnabled(props.enableSatellite)
        })
        watchEffect(() => {
            tencentMap.setTrafficEnable(props.enableTraffic)
        })
        watchEffect(() => {
            tencentMap.setAnnotationEnable(props.enablePoi)
        })
        watchEffect(() => {
            tencentMap.setBuildingEnable(props.enableBuilding)
        })
    }
    function getScale() : number {
        return tencentMap.getScaleLevel()
    }
    defineExpose({
        getScale
    })
</script>
<style>
</style>