* feat: add map plugin * feat: update * feat: add Map.Designer * feat: support polygon and clear canvas * feat: improve and support linestring * feat: map type default * feat: support group order * feat: support register group * feat: improve named and logic * fix: rename * feat: better * refactor: move to use postgresSQL supported type * feat: support circle * feat: support mysql * chore: @nocobase/plugin-map * fix: some error in postgres * fix: line lose * fix: accessKey or securityCode is incorrect * fix: improve * fix: shake screen in modal * feat: support serviceHOST * feat: improve * feat: support view map in detail * feat: support patten in details * fix: something went wrong in edit mode * fix: field name incorrectly * feat: support sqlite * feat: support circle in mysql * feat: support map configuration * feat: support map configuration * fix: remove unused div * feat: support show map in details * fix: disabled in details * fix: unused * feat: improve readpretty * fix: schemaInitialize * feat: improve alert and search * fix: mysql polygon not work * test: add fields test * test: improve * test: update * fix: test error * feat: improve search and support zoom * fix: if success should reset err message * feat: add isOverride to confirm * feat: improve
94 lines
2.1 KiB
TypeScript
94 lines
2.1 KiB
TypeScript
import { message, Select } from 'antd';
|
|
import { css } from '@emotion/css';
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
import { useDebounceFn } from 'ahooks';
|
|
import { useMapTranslation } from '../locales';
|
|
|
|
interface SearchProps {
|
|
aMap: any;
|
|
toCenter: (p: any) => void;
|
|
}
|
|
|
|
const Search = (props: SearchProps) => {
|
|
const { aMap, toCenter } = props;
|
|
const { t } = useMapTranslation();
|
|
const placeSearch = useRef<any>();
|
|
const [options, setOptions] = useState([]);
|
|
|
|
useEffect(() => {
|
|
aMap?.plugin('AMap.PlaceSearch', () => {
|
|
placeSearch.current = new aMap.PlaceSearch({
|
|
city: '全国',
|
|
pageSize: 30,
|
|
});
|
|
});
|
|
}, [aMap]);
|
|
|
|
const { run: onSearch } = useDebounceFn(
|
|
(keyword) => {
|
|
if (!placeSearch.current) {
|
|
return;
|
|
}
|
|
placeSearch.current.search(keyword || ' ', (status, result) => {
|
|
if (status === 'complete') {
|
|
setOptions(
|
|
result.poiList.pois.map((item) => {
|
|
return {
|
|
...item,
|
|
label: `${item.name}-${item.address}`,
|
|
value: item.id,
|
|
};
|
|
}),
|
|
);
|
|
} else {
|
|
if (status === 'no_data') {
|
|
setOptions([]);
|
|
return;
|
|
}
|
|
message.error(t('Please configure the AMap securityCode or securityHost correctly'));
|
|
}
|
|
});
|
|
},
|
|
{
|
|
wait: 300,
|
|
},
|
|
);
|
|
|
|
const onSelect = (value) => {
|
|
const place = options.find((o) => {
|
|
return o.value === value;
|
|
});
|
|
|
|
if (place?.location) {
|
|
toCenter(place.location);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={css`
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
z-index: 10;
|
|
width: calc(100% - 20px);
|
|
`}
|
|
>
|
|
<Select
|
|
showSearch
|
|
allowClear
|
|
style={{
|
|
background: 'rgba(255, 255, 255, 0.8)',
|
|
}}
|
|
placeholder={t('Enter keywords to search')}
|
|
filterOption={false}
|
|
onSearch={onSearch}
|
|
onSelect={onSelect}
|
|
options={options}
|
|
></Select>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Search;
|