<template>
    <div style="width: 100%; height: 800px">
        <baidu-map class="bm-view" :center="{ lng: state.lng, lat: state.lat }" :zoom="15" :scroll-wheel-zoom="true" v="3.0" type="API">
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type>
            <!-- :icon="{ url: 'http://api.map.baidu.com/img/markers.png', size: { width: 108, height: 108 } }" -->
            <bm-marker :position="state" :raiseOnDrag="true">
                <bm-info-window :show="show" @close="show = false" @open="show = true">
                    {{ address }}
                </bm-info-window>
            </bm-marker>
        </baidu-map>
    </div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue';
import { BaiduMap, BmMapType, BmMarker, BmInfoWindow } from 'vue-baidu-map-3x';

const props = defineProps({
    longitude: {
        type: Number,
        default: [],
        required: true,
    },
    latitude: {
        type: Number,
        default: [],
        required: true,
    },
});

const show = ref(false);
const address = ref('undefined');
const state = reactive({
    lng: '',
    lat: '',
});

watch(
    () => props.longitude,
    (val) => {
        state.lng = val;
    },
    {
        immediate: true,
    },
);
watch(
    () => props.latitude,
    (val) => {
        state.lat = val;
    },
    {
        immediate: true,
    },
);

const handelClick = (e) => {
    show.value = false;
    state.lng = e.point.lng;
    state.lat = e.point.lat;
    const geocoder = new window.BMap.Geocoder();

    // 解析地址
    geocoder.getLocation(e.point, (res) => {
        if (res) {
            show.value = true;
            address.value = res.address;
        }
    });
};
</script>
<style scoped>
/* 去除水印 */
::v-deep(.BMap_cpyCtrl) {
    display: none;
}

::v-deep(.anchorBL) {
    display: none !important;
}

/* 布局css元素 */
.bm-view {
    width: 100%;
    height: 100%;
    margin: auto;
}
</style>
