地震速报 地图打点

src/views/disasterRiskMonitor/earthquakeRapidReport/earthquakeRapidReportDetail.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="container">
-    <Map ref="mapRef" :zoom="4.7" :active-map="activeMap" class="containerHeight" />
+    <div id="aMap":style="{height: 'calc(100% - ' + height + 'px)'}" />
     <van-floating-panel
         v-model:height="height"
         :anchors="anchors"
         :content-draggable="false"
+        @height-change="handleResize"
     >
       <div class="info-content">
         <div class="info-item">
@@ -21,7 +22,7 @@
           </div>
           <div class="card-item">
             <div class="text">经纬度：</div>
-            <div>东经{{ detailData.lng2 }}，北纬{{ detailData.lat2 }}</div>
+            <div>东经{{ detailData.lng }}°，北纬{{ detailData.lat }}°</div>
           </div>
           <div class="card-item">
             <div class="text">震源深度：</div>
@@ -34,11 +35,13 @@
 </template>
 
 <script lang="ts" setup name="EarthquakeRapidReportDetail">
+import {useAMap} from "@/hooks/AMap/useAMap";
+import dotImg from '@/assets/images/dotIcon/dot.gif';
+
 const route = useRoute();
 const anchors = ref([30, 300, window.innerHeight * 0.6, window.innerHeight * 0.95 - 55]);
 
-let mapRef = ref();
-let activeMap = ref("logical");
+let map, AMap;
 
 let height = ref(300);
 let detailId = ref();
@@ -50,32 +53,71 @@ let detailData = ref({
   distance: '',
   level: '',
   lng: '',
-  lng2: '',
-  lat: '',
-  lat2: ''
+  lat: ''
 });
 
+const handleResize = () => {
+  map.resize();
+};
+
 onMounted(() => {
   detailId.value = route.query.id;
-  if (!!detailId.value) {
-    detailData.value = {
-      id: '1',
-      name: '西藏日喀则市定日县',
-      time: '2025-01-07 15:04:31',
-      depth: '10',
-      distance: '2482',
-      lng2: '87.48°',
-      lat2: '28.64°',
-      level: '3.2'
-    };
-  }
+  const mapUtils = useAMap({});
+  mapUtils.initMap({
+    key: '9c5041381e5e824f9ee324d8f7a40150', // 申请好的Web端开发者Key，首次调用 load 时必填
+    securityJsCode: '4868bc1b8fac7d9e54e7279ed556879a', // 安全密钥
+    version: '2.0',
+    zoom: 4.7,
+    center: [110.925175, 21.678955],
+    dragEnable: true,
+    scrollWheel: true,
+    // 加载完成事件
+    onLoadCompleted: () => {
+      AMap = mapUtils.getAMap();
+      map = mapUtils.getMap();
+      if (!!detailId.value) {
+        detailData.value = {
+          id: '1',
+          name: '西藏日喀则市定日县',
+          time: '2025-01-07 15:04:31',
+          depth: '10',
+          distance: '2482',
+          lng: '87.48',
+          lat: '28.64',
+          level: '3.2'
+        };
+        const position = new AMap.LngLat(detailData.value.lng, detailData.value.lat);
+        const marker = new AMap.Marker({
+          position: position,
+          icon: new AMap.Icon({
+            size: new AMap.Size(106, 80), //图标所处区域大小
+            image: dotImg
+          }),
+          offset: new AMap.Pixel(-53, -40)
+        });
+
+        // 将Marker添加到地图上
+        map.add(marker);
+        map.setCenter(position);
+      }
+      window.addEventListener('resize', handleResize);
+    },
+    onMarkerClick: (data) => {}
+  });
 });
+
+onUnmounted(() => {
+  map = null;
+  AMap = null;
+  window.removeEventListener('resize', handleResize);
+})
 </script>
 
 <style lang="scss" scoped>
 .container {
   position: relative;
   overflow: hidden;
+  height: calc(100vh - 55px);
   .van-floating-panel {
     position: absolute;
   }
@@ -118,8 +160,4 @@ onMounted(() => {
     }
   }
 }
-.containerHeight {
-  height: calc(100vh - 55px);
-}
-
 </style>