Просмотр исходного кода

fix: 修复图例与地图线条圆点关联的问题

sequoia tungfang 1 месяц назад
Родитель
Сommit
de3f384d63
1 измененных файлов с 1 добавлено и 86 удалено
  1. 1 86
      src/components/TongzhouTrafficMap.vue

+ 1 - 86
src/components/TongzhouTrafficMap.vue

@@ -2,11 +2,6 @@
   <div class="map-wrapper">
     <div ref="mapContainer" class="map-container"></div>
 
-    <div class="map-search-bar" :style="privateStyle.search">
-      <input v-model="searchKey" type="text" placeholder="请输入路段或设备名称" @keyup.enter="handleSearch" />
-      <button @click="handleSearch">查询</button>
-    </div>
-
     <div class="map-legend" :style="privateStyle.legend">
       <div class="legend-title">图例</div>
       <div class="legend-list">
@@ -45,10 +40,7 @@ export default {
       infoWindow: null,
       routeGroups: {},
       polylines: [],
-      searchKey: '',
-      placeSearch: null,
       privateStyle: {
-        search: {},
         legend: {}
       },
       activeLegends: ["中心计划", "干线协调", "勤务路线", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"],
@@ -73,7 +65,6 @@ export default {
 
     // 自定义首页地图搜索和图例位置样式
     if (this.$route.path === '/home') {
-      this.privateStyle.search = { top: "100px", left: "25%" };
       this.privateStyle.legend = { right: "25%" };
     }
   },
@@ -97,7 +88,7 @@ export default {
         this.AMap = await AMapLoader.load({
           key: this.amapKey,
           version: "2.0",
-          plugins: ['AMap.Driving', 'AMap.GeometryUtil', 'AMap.PlaceSearch'] // 必须有这个
+          plugins: ['AMap.Driving', 'AMap.GeometryUtil']
         });
 
         this.map = new this.AMap.Map(this.$refs.mapContainer, {
@@ -106,43 +97,10 @@ export default {
           center: [116.663, 39.905],
         });
 
-        // 关键:在这里初始化,确保 search 方法可用
-        this.placeSearch = new this.AMap.PlaceSearch({
-          map: this.map,
-          pageSize: 1,
-          autoFitView: true
-        });
-
         this.map.on('complete', () => this.drawStaticRoutes());
       } catch (err) { console.error('地图初始化失败', err); }
     },
 
-    // 搜索功能实现
-    handleSearch() {
-      if (!this.searchKey) return;
-
-      // 1. 逻辑优先:搜索本地设备名称
-      const foundLegend = this.legendConfig.find(item =>
-        item.name.includes(this.searchKey)
-      );
-
-      if (foundLegend) {
-        // 如果搜到了图例中的路段,直接定位到该路段起点并打开图例
-        if (!this.activeLegends.includes(foundLegend.name)) {
-          this.toggleRouteVisible(foundLegend.name);
-        }
-        this.map.setZoomAndCenter(15, foundLegend.start);
-      } else {
-        // 2. 逻辑兜底:调用高德地点搜索 API
-        this.placeSearch.search(this.searchKey, (status, result) => {
-          console.log('result => ', result);
-          if (status !== 'complete') {
-            console.warn('未找到相关位置');
-          }
-        });
-      }
-    },
-
     drawStaticRoutes() {
       const AMap = this.AMap;
 
@@ -579,47 +537,4 @@ export default {
   width: 10px;
   height: 10px;
 }
-
-/* 搜索框容器 */
-.map-search-bar {
-  position: absolute;
-  top: 55px;
-  left: 50px;
-  z-index: 100;
-  display: flex;
-  background: rgba(7, 21, 43, 0.9);
-  border: 1px solid #1e4d8e;
-  padding: 4px;
-  border-radius: 4px;
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
-}
-
-.map-search-bar input {
-  width: 200px;
-  background: transparent;
-  border: none;
-  color: #fff;
-  padding: 8px 12px;
-  outline: none;
-  font-size: 13px;
-}
-
-.map-search-bar input::placeholder {
-  color: #5b7da8;
-}
-
-.map-search-bar button {
-  background: #1e4d8e;
-  color: #fff;
-  border: none;
-  padding: 0 15px;
-  cursor: pointer;
-  border-radius: 2px;
-  transition: background 0.3s;
-  font-size: 13px;
-}
-
-.map-search-bar button:hover {
-  background: #32c5ff;
-}
 </style>