天地图周边搜索

使用天地图接口，http://lbs.tianditu.gov.cn/server/search.html

import { Input, Space, List, Pagination, message, Spin, } from 'antd';
import React, { ChangeEvent, useEffect, useState } from 'react';
import './index.less'
import { SearchOutlined } from '@ant-design/icons';
const { Search } = Input;

import locationImg from './images/定位.png'
import { useDebounce } from '@/utils';
import { useRequest } from 'ahooks';


const data = [
    {
        id: 1,
        title: '江南园林绿化工程公司1',
        description: '体育路1',
    },
    {
        id: 2,
        title: '江南园林绿化工程公司2',
        description: '体育路1',
    },
    {
        id: 2,
        title: '江南园林绿化工程公司3',
        description: '体育路1',
    },
    {
        id: 2,
        title: '江南园林绿化工程公司4',
        description: '体育路1',
    },
];
let searchParams = {
    mapBound: "118.98415,32.0726,122.0502,30.2377",
    queryType: 7,
    count: 10,
    start: 0,
    queryTerminal: 10000,
    level: "15",
    keyWord: ""
}

export default function AddressSearch() {
    const [value, setValue] = useState('');
    const [list, setList] = useState<any[]>([])
    const [total, setTotal] = useState(0)
    const [page, setPage] = useState(0);
    const [spinning, setSpinning] = useState(false)
    const onChang = (e: ChangeEvent<HTMLInputElement>) => {
        let value = e.target.value;
        setValue(value)
        setSpinning(true)
        setPage(0)
    }
    const debounceParams = useDebounce(value);

    const { run: addressRun } = useRequest((searchParams) => `http://api.tianditu.gov.cn/search?postStr=${JSON.stringify(searchParams)}&type=query&tk=`, { manual: true })
    useEffect(() => {
        if (debounceParams) {
            searchParams.keyWord = debounceParams
            searchParams.start = page;
            addressRun(searchParams).then(res => {
                if (res && res.count > 0 && res.pois) {

                    setTotal(res.count)
                    setList(res.pois)
                    setSpinning(false)
                } else {
                    setList([])
                    setTotal(0)
                }
            })
        } else {
            setList([])
            setTotal(0)
            setSpinning(false)
        }

    }, [debounceParams, page]);
    const onChange = (page: number, pageSize?: number | undefined) => {
        setPage(page)

    }
    const setIndex = (page: number, index: number) => {
        if (page === 0) page = 1;
        let t = (page - 1) * 10 + index;

        return t
    }
    return (
        <div className="address-wrap">
            <Input size="large" placeholder="请输入地址" prefix={<SearchOutlined />} allowClear style={{ marginBottom: 10 }} onChange={(e) => onChang(e)} />
            <Spin spinning={spinning}>
                {list.length > 0 && <ul className="address-list">
                    {list.map((item, index) => {
                        return (<li>
                            <div className="img">
                                <span className='index'>{setIndex(page, index + 1)}</span>
                                <img src={locationImg} alt="" width='20' height='33' />
                            </div>
                            <div className="address-right-item">
                                <div className="name">{item.name}</div>
                                <div className="location">{item.address}</div>
                            </div>
                        </li>)
                    })}
                    <Pagination defaultCurrent={1} size="small" total={total} showSizeChanger={false} style={{ marginTop: 20 }} onChange={onChange} />
                </ul>}

            </Spin>

        </div>

    )

}