支持根据搜索结果定位

src/editor/Plot/Tools/SearchModal.tsx

@@ -22,6 +22,12 @@ export const SearchModal = (props: SearchModalProps) => {
     delaySearch(keyword);
   };
 
+  const selectPlace = (item: AMap.SearchResultItem) => {
+    editorAction.moveTo(item);
+    onCancel();
+    setKeyword("");
+  };
+
   return (
     <Modal visible={visible} onCancel={onCancel} footer={[]} title="搜索定位">
       <Input
@@ -30,8 +36,12 @@ export const SearchModal = (props: SearchModalProps) => {
         onChange={(e) => searchPlace(e.target.value)}
       />
       <div className="search-result-container">
-        {searchResults.map((item) => (
+        {searchResults.map((item, index) => (
-          <div key={item.name} className="search-result-item">
+          <div
+            key={index}
+            className="search-result-item"
+            onClick={() => selectPlace(item)}
+          >
             {item.name}
           </div>
         ))}

src/editor/Plot/index.less

@@ -41,3 +41,14 @@
     }
   }
 }
+.search-result-container{
+  padding: 8px 0;
+}
+.search-result-item{
+  padding: 4px;
+  cursor: pointer;
+  &:hover{
+    background-color: #eee;
+    text-decoration: underline;
+  }
+}

src/map/MapEditor.ts

@@ -67,7 +67,7 @@ export class MapEditor extends Emitter implements IMapEditor {
     });
     this._map = new AMap.Map(this.dom);
     this.autoComplete = new AMap.AutoComplete({});
-    this.placeSearch = new AMap.PlaceSearch(this._map);
+    this.placeSearch = new AMap.PlaceSearch({ map: this._map });
     this.initEditors();
     // Space的key是空字符串, 这就离谱.
     registerHotkey(" ", { callback: this.finishEditOverlay.bind(this) });
@@ -233,6 +233,11 @@ export class MapEditor extends Emitter implements IMapEditor {
     });
   }
 
+  moveTo(item: AMap.SearchResultItem) {
+    this.placeSearch?.setCity(item.adcode);
+    this.placeSearch?.search(item.name);
+  }
+
   _buildFromOverlay(overlay: IOverlay) {
     const { type, id } = overlay;
     const editor = this.overlayEditors.find(

src/map/type.ts

@@ -14,6 +14,7 @@ export interface IMapEditor {
   getZoom(): number;
   updateOverlayBackground(id: string, src?: string): void;
   searchPlace(keyword: string): Promise<AMap.SearchResultItem[]>;
+  moveTo(item: AMap.SearchResultItem): void;
 }
 
 export enum OverlayCategory {

src/store/actions/index.ts

@@ -168,6 +168,11 @@ export class EditorAction {
     this.dispatch(StoreAction.searchPlace(results));
   }
 
+  moveTo(item: AMap.SearchResultItem) {
+    this.dispatch(StoreAction.searchPlace([]));
+    this.mapEditor?.moveTo(item);
+  }
+
   private _openGeoJSON(geojson: GeoJSON.FeatureCollection) {
     console.log(geojson);
   }

src/types/amap.d.ts

@@ -33,7 +33,7 @@ declare global {
       //
     }
     class PlaceSearch {
-      constructor(map: AMap.Map);
+      constructor(props: { map: AMap.Map });
       setCity(code: string): void;
       search(name: string): void;
     }