<template>
  <div id="container" class="map" />
</template>

<script setup>
  

  onMounted(() => {
    // fetchData()
    var map = new BMapGL.Map('container')
    map.centerAndZoom(new BMapGL.Point(109.643452, 31.028006), 16)
    // map.enableScrollWheelZoom(true)
    // map.setMapType(BMAP_SATELLITE_MAP)

    // 绘制自定义marker图标
    var myIcon = new BMapGL.Icon("t.png", new BMapGL.Size(42, 59));
	
	const markersData = [
	    { lng: 109.643452, lat: 31.028006 },
	
	];
	// 循环创建标记并添加到地图上
	markersData.forEach((item) => {
	    const point = new BMapGL.Point(item.lng, item.lat);
	    const marker = new BMapGL.Marker(point,{
			icon: myIcon
		});
		// 创建图文信息窗口
		var sContent = `<div style="background:red;">111111</div>`;
		var infoWindow = new BMapGL.InfoWindow(sContent);
		// marker添加点击事件
		marker.addEventListener('click', function () {
		    this.openInfoWindow(infoWindow);
		    // 图片加载完毕重绘infoWindow
		    document.getElementById('imgDemo').onload = function () {
		        infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
		    };
		});
	    map.addOverlay(marker);
	});
	
  
  })
</script>
<style scoped lang="scss">
	:deep(.BMap_bubble_pop){
		    
		    
		
	}
  :deep(.BMap_cpyCtrl) {
    display: none;
  }
  :deep(.anchorBL) {
    display: none;
  }
  // ::v-deep {
  //   .BMap_cpyCtrl {
  //     display: none;
  //   }
  //   .anchorBL {
  //     display: none;
  //   }
  // }
  .map {
    width: 100%;
    height: 100%;
  }
</style>
