React Hook + antd design 引入腾讯地图实现

// import TMap from 'TMap';
import React, { useState, useEffect, useRef } from "react"
import { Modal, Button, Input } from 'antd';
import styles from '../index.less';
import Item from "antd/lib/list/Item";
const { Search } = Input;
export default (props) => {
    const [showModal, setshowModal] = useState(props.mapModal);
    const [map, setmap] = useState({});//地图对象
    const [suggestObj, setsuggestObj] = useState({});//储存搜索的内容；
    const [markerObj, setmarkerObj] = useState({});//中心点
    const [searchList, setsearchList] = useState([]);//搜索栏数据
    const [inputVal, setinputVal] = useState();//搜索栏内容
    const [searchObj, setsearchObj] = useState({});
    const [infoWindowList, setinfoWindowList] = useState(Array(10));
    useEffect(() => {
        if (showModal) {
            // 设置初始化
            const map = new TMap.Map(document.getElementById('container'), {
                center: new TMap.LatLng('纬度','经度'),
                zoom: 15,
                noClear: false,
            });
            // 设置搜索
            const searchItem = new TMap.service.Search({ pageSize: 10 });
            const suggest = new TMap.service.Suggestion({
                // 新建一个关键字输入提示类
                pageSize: 10, // 返回结果每页条目数
                region: 'XX城市', // 限制城市范围
                regionFix: true, // 搜索无结果时是否固定在当前城市
            });
            const marker = new TMap.MultiMarker({
                map: map,
                geometries: [],
            });

            let geocoder = new TMap.service.Geocoder();
            // 点击页面获取地点
            map.on('click', (event) => {
                console.log(event);
                marker.updateGeometries([
                    {
                        id: '1', // 点标注数据数组
                        position: event.latLng,
                    },
                ]);
                // 地址逆解析
                geocoder
                    .getAddress({ location: event.latLng }) // 将给定的坐标位置转换为地址
                    .then((result) => {
                        console.log(result);
                        // 显示搜索到的地址
                    });
            })
            setmap(map);
            setsuggestObj(suggest);
            setmarkerObj(marker);
            setsearchObj(searchItem)
        }
    }, [showModal]);

    // 点击搜素时，显示红点
    const onSearchVal = (e) => {
        const keyword = e;
        if (!keyword) return;
        infoWindowList.forEach((infoWindow) => {
            infoWindow.close();
        });
        infoWindowList.length = 0;
        markerObj.setGeometries([]);
        searchObj
            .searchRectangle({
                keyword: e,
                bounds: map.getBounds(),
            })
            .then(result => {
                result.data.forEach((item, index) => {
                    let geometries = markerObj.getGeometries();
                    // 设置展示窗口
                    let infoWindow = new TMap.InfoWindow({
                        map: map,
                        position: item.location,
                        content: `<h3>${item.title}</h3><p>地址：${item.address}</p><p>电话：${item.tel}</p>`,
                        offset: { x: 0, y: -50 },
                    });
                    infoWindow.close();

                    infoWindowList[index] = infoWindow;
                    geometries.push({
                        id: String(index),
                        position: item.location,
                    });
                    markerObj.updateGeometries(geometries);
                    markerObj.on('click', (e) => {
                        infoWindowList[Number(e.geometry.id)].open();
                    });
                });
                setinfoWindowList(infoWindowList)
            })


    }
    // 监听input框
    const onChangeInput = (e) => {
        const keyword = e.target.value;
        if (!keyword) {
            setsearchList([])
            return
        };
        suggestObj
            .getSuggestions({ keyword: keyword, location: map.getCenter() })
            .then(res => {
                setsearchList(res.data)
            })
    }

    // 点击li显示地址
    const suggestItem = (item) => {
        infoWindowList.forEach((infoWindow) => {
            infoWindow.close();
        });
        infoWindowList.length = 0;

        markerObj.setGeometries([]);
        markerObj.updateGeometries([
            {
                id: '0', // 点标注数据数组
                position: item.location,
            },
        ]);
        let infoWindow = new TMap.InfoWindow({
            map: map,
            position: item.location,
            content: `<h3>${item.title}</h3><p>地址：${item.address}</p>`,
            offset: { x: 0, y: -50 },
        });
        infoWindowList.push(infoWindow);
        setinfoWindowList(infoWindowList)
        map.setCenter(item.location);
        markerObj.on('click', (e) => {
            infoWindowList[Number(e.geometry.id)].open();
        });
        setinputVal(item.title)
        setsearchList([])
    }
    return (
        <Modal title="设置热搜地点" visible={props.mapModal} width={900}>
            <div id="container" className='text'></div>
            <div className={styles.panel}>
                <Search
                    placeholder="请输入搜索内容"
                    enterButton="搜索"
                    size="large"
                    onSearch={onSearchVal}
                    onChange={onChangeInput}
                    value={inputVal}
                />
                <ul className={styles.suggestionList}>
                    {
                        searchList.map(item => {
                            return <li onClick={() => suggestItem(item)} key={item.id}>{item.title}<span className={styles.item_info}>{item.address}</span></li>
                        })
                    }
                </ul>
            </div>
        </Modal>
    )
}

样式部分

/* 地图搜索 */
.panel{
    position: absolute;
    width: 300px;
    top: 30px;
    top: 100px;
    left: 30px;
    z-index: 9999;
}

.suggestionList{
    list-style: none;
    padding: 0 5px 10px;
    margin: 0;
    background: #fff;
    li{
        list-style: none;
        margin-top: 2px;
        background-color: #f6f6f6;
        text-decoration: none;
        font-size: 14px;
        color: black;
        display: block;
        cursor: pointer;
        padding: 0 10px;
        .item_info {
            font-size: 12px;
            color: grey;
        }
    }
    li a:hover:not(.header) {
        background-color: #eee;
    }
}