Bladeren bron

Home 地图搜索路口选中后弹出 InfoWindow

  - onSearchSelect 在 focusById 飞行结束后开 openLightInfo,与 marker click 行为一致
  - 仅 /home 路由触发,复用 _infoWindowProtectedMarker 避免视口裁剪期间错位
  - 600ms 延迟对齐 setZoomAndCenter 动画 + 视口重算时机
  - 修复搜索框点击下拉项后 caret 残留在右上角的问题
画安 4 weken geleden
bovenliggende
commit
6a2c24c633
2 gewijzigde bestanden met toevoegingen van 15 en 2 verwijderingen
  1. 12 1
      src/components/TongzhouTrafficMap.vue
  2. 3 1
      src/components/ui/MapSearchBox.vue

+ 12 - 1
src/components/TongzhouTrafficMap.vue

@@ -1568,12 +1568,23 @@ export default {
     /**
      * 搜索框选中回调:定位 + 立即触发视口重算(避免 100ms debounce 延迟),
      * 让目标 marker 在 setZoomAndCenter 动画期间就完成挂载。
+     * Home 页另在飞行结束后弹出该路口的 InfoWindow,与 marker click 行为一致。
      */
     onSearchSelect(item) {
       if (!item) return;
       const id = item['路口编号'];
-      this.focusById(id);
+      const finalPos = this.focusById(id);
       this.computeVisibleMarkers();
+
+      if (!finalPos) return;
+      if (!(this.$route && this.$route.path === '/home')) return;
+      const marker = this.markerById[id];
+      if (!marker) return;
+      setTimeout(() => {
+        if (this.isComponentDestroyed) return;
+        this._infoWindowProtectedMarker = marker;
+        this.openLightInfo(marker.getExtData(), finalPos);
+      }, 600);
     },
 
     /**

+ 3 - 1
src/components/ui/MapSearchBox.vue

@@ -26,7 +26,7 @@
         class="dropdown-item"
         :class="{ 'is-active': idx === activeIdx }"
         @mouseenter="activeIdx = idx"
-        @click="selectItem(item)"
+        @mousedown.prevent="selectItem(item)"
       >
         <div class="item-name">{{ item[nameField] }}</div>
         <div class="item-id">{{ item[idField] }}</div>
@@ -106,6 +106,7 @@ export default {
     selectItem(item) {
       this.$emit('select', item);
       this.open = false;
+      this.query = '';
       this.$refs.input && this.$refs.input.blur();
     },
     handleEsc() {
@@ -175,6 +176,7 @@ export default {
 .search-input {
   flex: 1;
   height: 100%;
+  line-height: 38px;
   background: transparent;
   border: none;
   outline: none;