<template>
    <div  :id="'equipmentIdMap' + domId" class="map">

    </div>
</template>
  
<script setup lang="ts">


let map: any = null
 
let domId = ref("0")
let viewPortList:any = []
let props = defineProps({
    lineStyle: {
        type: Object,
        default: {
            strokeColor: "#0e83ed",
            strokeWeight: 4
        }
    },
    scaleControlProps:{
        type: Object,
        default: {
           anchor:"BMAP_ANCHOR_TOP_LEFT"
        }
   
    },
    zoomControlProps:{
        type: Object,
        default: {
           anchor:"BMAP_ANCHOR_TOP_LEFT"
        }
    }
})

onMounted(() => {
    initMap()
})

let linePointList: any = []

const initMap = () => {
    map = new BMapGL.Map("equipmentIdMap" + domId.value);
    map.centerAndZoom(new BMapGL.Point(116.3944, 39.9063), 18);
    map.enableScrollWheelZoom(true);
    const  scaleCtrl = new BMapGL.ScaleControl(props.scaleControlProps);
    scaleCtrl.setAnchor(BMAP_ANCHOR_BOTTOM_LEFT)
    map.addControl(scaleCtrl);
    
    const zoomCtrl = new BMapGL.ZoomControl(props.zoomControlProps);  // 添加缩放控件
    zoomCtrl.setAnchor(BMAP_ANCHOR_TOP_LEFT)
    map.addControl(zoomCtrl);

    createMarkerInfo()
}

const createMarkerInfo =()=>{
    createDot(116.3944, 39.9063)
}


const createDot=(lon,lat)=>{
    const point =new BMapGL.Point(lon,lat)
    const marker =  new BMapGL.Marker(point);
    map.addOverlay(marker); 
    viewPortList.push(marker)
    createInfoWindow("标题" ,"合肥市-太湖县=大家好",marker,point)
}

const createInfoWindow=(title:any ,addressText:any,marker:any,point:any)=>{
    const  opts = {
	    width : 200,     // 信息窗口宽度
	    height: 100,     // 信息窗口高度
	    title : title , // 信息窗口标题
        message:'66666666666666合肥市-太湖县=大家好'
	}
	const infoWindow = new BMapGL.InfoWindow(addressText, opts);  // 创建信息窗口对象 
	marker.addEventListener("click", function(){          
		map.openInfoWindow(infoWindow, point); //开启信息窗口
	}); 
    viewPortList.push(infoWindow)
    setViewPortFn(viewPortList)
}


 

 
const setViewPortFn = (boundList:any) => {
    map.setViewport(boundList)
}


 
 

defineExpose({
  
})
</script>
  
<style scoped lang="scss">
.map {
    width: 100%;
    height: 100%;
}
</style>