feat 监控大屏、安全检测

src/components/Map/marker.vue

@@ -0,0 +1,69 @@
+<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>