👈 编写高德地图组件

kicc-ui/src/components/AMap/src/Amap.vue

@@ -1,8 +1,25 @@
 <template>
-  <div v-loading="mapState.loading">
+  <PageWrapper v-loading="mapState.loading"
-    <div id="mapview" ref="mapview"/>
+               contentClass="flex"
-    <div id="mapPanel" ref="mapPanel"/>
+               contentFullHeight
-  </div>
+               fixedHeight
+               dense
+  >
+    <div id="mapview"
+         ref="mapview"
+         style="margin-right: 342px;"
+         class="w-3/4 xl:w-5/5"
+    >
+      <div id="mapPanel" ref="mapPanel"/>
+    </div>
+    <div id="operatePanel" ref="operatePanel" class="w-1/4 xl:w-1/5">
+      操作面板
+      <div class="operatePanel-arrow" :class="mapState.toggleOperatePanelClass" @click="toggleOperatePanel()">
+        <span title="展开">‹</span>
+        <p title="隐藏">›</p>
+      </div>
+    </div>
+  </PageWrapper>
 </template>
 <script lang="ts" setup>
   import AMapLoader from '@amap/amap-jsapi-loader';
@@ -12,6 +29,7 @@
   import medicalKit from '/@/assets/images/medical-kit.svg';
   import hospitalTwinkle from '/@/assets/images/hospital-twinkle.gif';
   import redFlag from '/@/assets/images/redFlag.svg';
+  import { PageWrapper } from '/@/components/Page';
 
   let map;
   let largeHospitalMarkerCluster;
@@ -20,7 +38,11 @@
 
   const instance = getCurrentInstance();
   const mapState = reactive({
-    loading: true
+    loading: true,
+    toggleOperatePanelClass: {
+      'go-back': false
+    },
+    toggleStatus: false
   });
   /** 地图创建完成(动画关闭) */
   const complete = (): void => {
@@ -297,10 +319,84 @@
     }
   });
 
+  /** 处理切换操作面板 */
+  function toggleOperatePanel() {
+    mapState.toggleStatus = !mapState.toggleStatus;
+    if (mapState.toggleStatus) {
+      mapState.toggleOperatePanelClass['go-back'] = true;
+    } else {
+      mapState.toggleOperatePanelClass['go-back'] = false;
+    }
+  }
+
 </script>
 <style lang="less" scoped>
 #mapview {
   height: calc(100vh - 86px);
+
+  #mapPanel {
+    position: absolute;
+    background-color: white;
+    max-height: 90%;
+    overflow-y: auto;
+    top: 130px;
+    right: 18px;
+    width: 260px;
+    z-index: 1;
+  }
+
+  #mapPanel :deep(.amap-lib-driving) {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    overflow: hidden;
+  }
+}
+
+#operatePanel {
+  height: 100%;
+  background: #fff;
+  top: 0;
+  right: 0;
+  position: absolute;
+  z-index: 2;
+  margin: 0;
+  visibility: hidden;
+  opacity: 1;
+
+  .operatePanel-arrow {
+    width: 15px;
+    height: 94px;
+    background: #15a3fa;
+    position: absolute;
+    top: 50%;
+    margin: -48px 0 0 -15px;
+    cursor: pointer;
+    line-height: 88px;
+    font-size: 36px;
+    font-weight: 200;
+    font-family: Times;
+    text-align: center;
+    border-radius: 4px 0 0 4px;
+    color: #fff;
+    visibility: visible;
+    left: 0;
+    display: none;
+    box-shadow: 0 2px 10px rgba(0,0,0,.2);
+    display: block;
+    span {
+      display: block;
+    }
+    p {
+      display: none;
+      margin: 0;
+    }
+  }
+
+  .go-back {
+    span { display: none; }
+    p { display: block; }
+  }
+
 }
 
 :deep(.amap-marker-label) {
@@ -316,25 +412,4 @@
   display: none!important;
 }
 
-#mapPanel {
-  position: fixed;
-  background-color: white;
-  max-height: 90%;
-  overflow-y: auto;
-  top: 210px;
-  right: 18px;
-  width: 280px;
-}
-
-#mapPanel :deep(.amap-call) {
-  background-color: #009cf9;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-
-#mapPanel :deep(.amap-lib-driving) {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  overflow: hidden;
-}
 </style>