折叠菜单

src/components/Map/index.vue

@@ -86,7 +86,7 @@ const height = ref('100%');
 
 const mapState = reactive({
   center: [110.925175, 21.678955],
-  zoom: 7.9,
+  zoom: 8.5,
   minZoom: 6,
   maxZoom: 20,
   isThreeDimensional: false,
@@ -101,6 +101,7 @@ const drawTool = useDrawTool();
 // 初始化地图
 const mapUtils = useAMap({
   key: '9c5041381e5e824f9ee324d8f7a40150', // 申请好的Web端开发者Key，首次调用 load 时必填
+  securityJsCode: '4868bc1b8fac7d9e54e7279ed556879a', // 安全密钥
   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   pitch: mapState.isThreeDimensional ? 45 : 0,
   zoom: mapState.zoom,

src/hooks/AMap/useAMap.ts

@@ -11,6 +11,9 @@ export function useAMap(options) {
   let addPoints = [];
   // 初始化事件
   const initMap = (options) => {
+    window._AMapSecurityConfig = {
+      securityJsCode: options.securityJsCode
+    };
     AMapLoader.load({
       key: options.key, // 申请好的Web端开发者Key，首次调用 load 时必填
       version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

src/views/globalMap/LeftMenu.vue

@@ -8,6 +8,7 @@
           <div class="search-header">
             <div class="header-left">
               <i class="icon-position1" />
+              <div class="text1">地址</div>
             </div>
           </div>
           <div class="search-list">
@@ -51,14 +52,9 @@
               <div class="text1">视频</div>
             </div>
           </div>
-          <div class="search-list" style="height: 160px">
-            <div class="scroll" style="height: 150px">
-              <div
-                v-for="(item, index) in searchState.videoList"
-                :key="index"
-                class="list-item2"
-                style="margin-top: 5px"
-              >
+          <div class="search-list" style="height: 150px">
+            <div class="scroll" style="height: 140px">
+              <div v-for="(item, index) in searchState.videoList" :key="index" class="list-item2" style="margin-top: 5px">
                 <div class="text1" :title="item.name" @click="handleShowDialog(item)">{{ item.name }}</div>
                 <div class="tags">
                   <div v-for="(item2, index2) in item.tag_info" :key="index2" class="tag">{{ item2.dict_label }}</div>
@@ -320,6 +316,12 @@ defineExpose({ setMenuChange });
     z-index: 9;
     padding: 10px 6px;
     .search-title {
+      color: transparent;
+      background-image: linear-gradient(to bottom, #fff 50%, #a6d3e1 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      display: inline-block;
+      font-family: 'YouSheBiaoTiHei';
       font-size: 18px;
       line-height: 36px;
       padding: 0 9px;

src/views/globalMap/RightMenu/index.vue

@@ -25,7 +25,11 @@
           <div class="down-btn" @click="clickBtn('down')"></div>
         </div>
       </div>
-      <div v-show="menuState.showMenu" style="display: inline-block; pointer-events: auto">
+      <div v-show="menuState.showMenu" style="display: inline-block; pointer-events: auto; position: relative">
+        <div class="fold-btn" @click="clickContractMenu">
+          <i class="fold-icon" />
+          折叠菜单
+        </div>
         <!--图层分析-->
         <LayerAnalysis v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '图层分析'" :point-type="pointType" />
         <!--空间分析-->
@@ -309,6 +313,30 @@ defineExpose({ handleMenu, showIndexMenu, clickContractMenu, updateMenu, getMenu
     }
   }
 }
+.fold-btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  width: 103px;
+  height: 26px;
+  background: url('@/assets/images/map/rightMenu/btn3.png') no-repeat;
+  background-size: 100% 100%;
+  font-size: 15px;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  padding-left: 12px;
+  cursor: pointer;
+  .fold-icon {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    background: url('@/assets/images/map/rightMenu/fold.png') no-repeat;
+    background-size: 100% 100%;
+    margin-right: 6px;
+  }
+}
 .icon1 {
   width: 32px;
   height: 30px;