地图marker效果实现及交互

src/views/index.vue

@@ -29,6 +29,15 @@
           <div class="echartsdiv" ref="echarts03" style="height: calc(100% - 69px);"></div>
         </div>
       </div>
+      <div ref="infoWindowContent" v-show="showInfoWindow">
+        <div class="infoWindowContent">
+          <div class="linkpoint lefttoppoint"></div>
+          <div class="linkpoint righttoppoint"></div>
+          <div class="linkpoint leftbottompoint"></div>
+          <div class="linkpoint rightbottompoint"></div>
+          <div class="camername">{{ currentHouse.camername }}</div>
+        </div>
+      </div>
     </div>
 </template>
 <script setup>
@@ -43,6 +52,11 @@ const echarts03 = ref(null);
 const echars01data = ref(null);
 const echars02data = ref(null);
 const echars03data = ref(null);
+const infoWindowContent = ref(null);
+const showInfoWindow = ref(false);
+const currentHouseCode = ref('');
+const currentHouse = ref({});
+let infoWindow = null;
 let geocoder = null;
 const alarm_type=ref({
   "none":{
@@ -102,6 +116,7 @@ const houselist=ref([{
   addr:"简阳市石桥镇羊羊小镇大华国际B1栋13楼1322号",
   lnglat:[0,0],
   alarmtype:"smoke",
+  camername:"1-10002号摄像头",
 }]);
 
 const initHouseLoca=()=>{
@@ -130,17 +145,46 @@ const getGeoLocation=(houseind,address)=> {
       const lnglat = result.geocodes[0].location; // 经纬度对象
       houselist.value[houseind].lnglat=[lnglat.getLng(),lnglat.getLat()];
       //console.log('经度：', lnglat.getLng(), '纬度：', lnglat.getLat());
-      addMarker(lnglat); // 添加标记到地图上
+      addMarker(houselist.value[houseind],lnglat); // 添加标记到地图上
     } else {
       console.error('获取位置失败');
     }
   });
 }
 
-const addMarker=(lnglat) =>{
+const addMarker=(houseinfo,lnglat) =>{
+  // 创建自定义 Marker 的 HTML 内容
+  const customMarkerContent = document.createElement('div');
+  customMarkerContent.id = houseinfo.code;
+  customMarkerContent.className = 'custom-marker'; // 可以添加一些 CSS 类来美化 Marker
+  customMarkerContent.innerHTML = '<div class="icon1"></div><div class="icon2"></div><div class="icon '+houseinfo.alarmtype+'"><img src='+alarm_type.value[houseinfo.alarmtype].icon+'></div><div class="housename">'+houseinfo.name+'<img src="/images/aowllow_up.png"></div>'; // 设置内容为红色的方块，显示一个 "X"
+  customMarkerContent.style.cursor = 'pointer'; // 设置鼠标样式为指针，表示可点击
   const marker = new AMap.value.Marker({
     position: lnglat, // 经纬度对象
+    content:customMarkerContent,
     map: map.value, // 添加到哪个地图实例
+    extData:houseinfo,
+  });
+  marker.on('click',function(e){    
+    if(currentHouseCode.value!='' && currentHouseCode.value!=e.target.dom.firstChild.id){
+      document.getElementById(currentHouseCode.value).className = "custom-marker";
+    }
+    let classnames=document.getElementById(e.target.dom.firstChild.id).className;
+    if(classnames.indexOf("active")==-1){
+      if(infoWindow!=null) infoWindow.close();
+      showInfoWindow.value=true;
+      currentHouseCode.value=e.target.dom.firstChild.id;
+      document.getElementById(currentHouseCode.value).className = "custom-marker active";
+      let extdata = e.target.getExtData();
+      currentHouse.value = extdata;
+      infoWindow.setContent(infoWindowContent.value)
+      infoWindow.open(map.value,e.target.getPosition());      
+    }else{
+      document.getElementById(currentHouseCode.value).className = "custom-marker";
+      infoWindow.close();
+      showInfoWindow.value=false;
+      currentHouseCode.value="";
+    }
   });
   map.value.setCenter(lnglat);
 }
@@ -173,6 +217,12 @@ const initMap = () => {
         radius: 1000, // 范围，默认：1000
         extensions: "all" // 返回地址描述对应的详细信息
       });
+      infoWindow = new AMap.value.InfoWindow({
+        isCustom:true,
+        offset: new AMap.value.Pixel(220,-28),
+        autoMove:true,
+        closewhenClickMap:true,
+      });
       map.value.clearMap() // 清除地图覆盖物
       // 地图是否可拖拽和缩放
       map.value.setStatus({
@@ -180,8 +230,6 @@ const initMap = () => {
         zoomEnable: true, // 是否可缩放
       })
       initHouseLoca();
-      initWindow()
-
     })
     .catch((e) => {
       console.log('error', e)
@@ -610,10 +658,192 @@ onMounted(() => {
   initData();
 })
 </script>
-<style scoped>
+<style>
 .custom-tooltip .el-tooltip__popper {
   background-color: #484e58 !important; /* 修改为你的颜色 */
 }
+.custom-marker{
+      display: grid;
+      color: #fff;
+      font-size: 12px;
+      .icon1,.icon2{
+        display: none;
+      }
+      .housename{
+          width: 140px;
+          margin-left: -55px;
+          text-align: center;
+          background: #484e58;
+          margin-top: 42px;
+          padding: 3px 5px;
+          border-radius: 18px;
+          position: relative;
+          position: absolute;
+          z-index: 1;
+          img{
+            position: absolute;
+            left: 50%;
+            width: 10px;
+            height: 6px;
+            margin-left: -4px;
+            top: -6px;
+          }
+      }
+      .icon{
+        border : 1px solid #fff;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;  
+        display: flex;
+        justify-content: center;
+        justify-items: center;
+        position: absolute;
+        z-index: 1;
+        img{
+          width: 24px;
+          height: 24px;
+          margin-top: 4px;
+        }         
+      }
+      .none{
+        background-color: #2287fe;     
+      }
+      .fire{
+        background-color: #dd4949;  
+      }
+      .smoke{
+        background-color: #ef911c;
+      }
+      .temp{
+        background-color: #12c9b5;
+      }
+      .person{
+        background-color: #833dd9;
+      }
+}
+
+.custom-marker.active{
+      display: grid;
+      color: #fff;
+      font-size: 12px;
+      .icon1,.icon2{
+        display: block;
+        position: absolute;
+        z-index: 0;
+      }
+      .icon1{
+        width: 90px;
+        height: 90px;
+        background: transparent;
+        border: 2px solid #4b3c2a;
+        border-radius: 50%;
+        left: -29px;
+        top: -29px;
+      }
+      .icon2{
+        width: 60px;
+        height: 60px;
+        background: #9a6523;
+        border-radius: 50%;
+        top: -14px;
+        left: -14px;
+      }
+      .housename{
+          width: 140px;
+          margin-left: -55px;
+          text-align: center;
+          background: #484e58;
+          margin-top: 70px;
+          padding: 3px 5px;
+          border-radius: 18px;
+          position: relative;
+          position: absolute;
+          z-index: 1;
+          img{
+            position: absolute;
+            left: 50%;
+            width: 10px;
+            height: 6px;
+            margin-left: -4px;
+            top: -6px;
+          }
+      }
+      .icon{
+        border : 1px solid #fff;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;  
+        display: flex;
+        justify-content: center;
+        justify-items: center;
+        position: absolute;
+        z-index: 1;
+        img{
+          width: 24px;
+          height: 24px;
+          margin-top: 4px;
+        }         
+      }
+      .none{
+        background-color: #2287fe;     
+      }
+      .fire{
+        background-color: #dd4949;  
+      }
+      .smoke{
+        background-color: #ef911c;
+      }
+      .temp{
+        background-color: #12c9b5;
+      }
+      .person{
+        background-color: #833dd9;
+      }
+}
+.infoWindowContent{
+  border: 2px solid #fff;
+  position: relative;
+  width: 380px;
+  height: 260px;
+  border-radius: 5px;
+  .camername{
+        height: 26px;
+        width: auto;
+        line-height: 16px;
+        position: absolute;
+        left: 5px;
+        top: 5px;
+        font-size: 12px;
+        background-color: #0000004f;
+        color: #fff;
+        padding: 5px 15px;
+        border-radius: 20px;
+  }
+  .linkpoint{
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    border: 3px solid #fff;    
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .lefttoppoint{
+    top: -8px;
+    left: -8px;
+  }
+  .righttoppoint{
+    top: -8px;
+    right: -8px;
+  }
+  .leftbottompoint{
+    bottom: -8px;
+    left: -8px;
+  }
+  .rightbottompoint{
+    bottom: -8px;
+    right: -8px;
+  }
+}
 </style>
 <style lang='scss' scoped>
 .containerMap{