diff --git a/src/editor/Plot/Tools/SearchModal.tsx b/src/editor/Plot/Tools/SearchModal.tsx index 85a6e4c..63b97de 100644 --- a/src/editor/Plot/Tools/SearchModal.tsx +++ b/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 ( { onChange={(e) => searchPlace(e.target.value)} />
- {searchResults.map((item) => ( -
+ {searchResults.map((item, index) => ( +
selectPlace(item)} + > {item.name}
))} diff --git a/src/editor/Plot/index.less b/src/editor/Plot/index.less index 83e5ae8..b655f0f 100644 --- a/src/editor/Plot/index.less +++ b/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; + } +} \ No newline at end of file diff --git a/src/map/MapEditor.ts b/src/map/MapEditor.ts index 7aaa434..d7e27b3 100644 --- a/src/map/MapEditor.ts +++ b/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( diff --git a/src/map/type.ts b/src/map/type.ts index 37e970b..3ea2650 100644 --- a/src/map/type.ts +++ b/src/map/type.ts @@ -14,6 +14,7 @@ export interface IMapEditor { getZoom(): number; updateOverlayBackground(id: string, src?: string): void; searchPlace(keyword: string): Promise; + moveTo(item: AMap.SearchResultItem): void; } export enum OverlayCategory { diff --git a/src/store/actions/index.ts b/src/store/actions/index.ts index 5b5790c..e94eaec 100644 --- a/src/store/actions/index.ts +++ b/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); } diff --git a/src/types/amap.d.ts b/src/types/amap.d.ts index 79520aa..e09c15b 100644 --- a/src/types/amap.d.ts +++ b/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; }