feat：完善景区页面

src/views/scenic/components/big-car-ship-map.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="dialog">
+    <el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
+      <div id="big-car-ship" class="big-car-ship" />
+      <img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+  import carIcon from '@/assets/images/car.png'
+  import shipIcon from '@/assets/images/ship.png'
+  import { useMap } from '@/hooks/map'
+
+  let modelValue = defineModel()
+  const { map, initMap, addMarker } = useMap()
+
+  watch(
+    () => modelValue.value,
+    (val) => {
+      if (val && !map.value) {
+        setTimeout(() => {
+          initMap('big-car-ship', 109.491961, 31.024285, 16)
+          addMarker(carIcon, [109.491045, 31.028725], [36, 50])
+          addMarker(carIcon, [109.483266, 31.024718], [36, 50])
+          addMarker(shipIcon, [109.479062, 31.021499], [36, 50])
+          addMarker(shipIcon, [109.488907, 31.017476], [36, 50])
+        }, 500)
+      }
+    }
+  )
+</script>
+
+<style scoped lang="scss">
+  :deep(.BMap_cpyCtrl) {
+    display: none;
+  }
+  :deep(.anchorBL) {
+    display: none;
+  }
+  .dialog {
+    :deep(.el-dialog) {
+      width: vw(2540);
+      height: vh(900);
+      padding: 0;
+    }
+    :deep(.el-dialog__header) {
+      padding-bottom: 0 !important;
+    }
+  }
+  .big-car-ship {
+    width: vw(2540);
+    height: vh(900);
+  }
+  .close {
+    cursor: pointer;
+    position: absolute;
+    right: vw(20);
+    top: vh(20);
+    width: vw(60);
+    z-index: 9999;
+  }
+</style>