基于react-amap 和 antd 实现高德地图搜索周边的功能

1.antd的select组件：onSearch函数，监测输入框中的内容，并调用高德地图API实现搜索；onChange函数：标记选中搜索中的某一条数据

2.react-amap在事件绑定events中有created事件，用于兼容高德原生接口

实现功能代码如下

import React, { useEffect, useState } from "react";

import { Map, Marker } from "react-amap";

import { innerHeight, innerWidth } from "../styles/hzsize";

import { Row, Col, Select } from "antd";

import './locationcss.css'

const MapLocation = (props) => {

    //地图搜索相关参数

    const [pois, setPois] = useState([])

    const [signAddrList, setSignAddrList] = useState({

        address: "",

        distance: NaN,

        id: "B0FFLAFX5T",

        location: { P: 25.082074, Q: 102.73076000000003, lng: '', lat: '' },

        name: "",

        shopinfo: "0",

        tel: "",

        type: ""

    })

    const polygonStyle = {

        isOutpoint: true,

        borderWeight: 3,

        strokeColor: "#FF33FF",

        strokeWeight: 6,

        strokeOpacity: 0.2,

        fillOpacity: 0.4,

        fillColor: "#1791fc",

        zIndex: 50

    }

    useEffect(() => {

    }, [props])

    // 进行select框动态输入焦点事件监听，并实现搜索

    const onSearch = (val, isFocus = false) => {

        if (isFocus && pois && pois.length) {

            return

        }

        const place = new window.AMap.PlaceSearch({

            pageSize: 10,

            pageIndex: 1,

            citylimit: true,    // 仅搜索本城市的地名

            // city:限制为只能搜索当前地区的位置  不填则为全国

        })

        // 进行搜索

        place.search(val, (status, result) => {

            const { info, poiList } = result

            if (result.length) { return }

            if (info !== 'OK') {

                return

            }

            if (poiList.pois && Array.isArray(poiList.pois)) {

                setPois(poiList.pois)

            }

        })

    }

    // 选中某条数据，并返回给子组件

    const onChange = (id) => {

        // 匹配出当前选中得一行数据

        const signAddrList = pois.find(item => item.id === id) || null

        console.log('signAddrList', signAddrList);

        if (signAddrList) {

            setSignAddrList(signAddrList)

            console.log('signAddrList', signAddrList);

            // 传到选择地址模态框

        }

    }

    return (

        <div className='visualization' style={{ width: innerWidth, height: innerHeight, position: "relative" }}>

            <div style={{ zIndex: 100, position: "absolute", top: "5px", width: "95%", left: "2.5%", right: "2.5%" }}>

                <Row align='top' justify='center' style={{ width: "100%" }}>

                    <Col style={{ width: "100%" }}>

                        <Select

                            showSearch

                            style={{ width: '100%', borderRadius: "10px" }}

                            placeholder="请输入地址"

                            optionFilterProp="children"

                            allowClear

                            onSearch={onSearch}

                            onChange={onChange}

                        >

                            {

                                pois && pois.length > 0 ? pois.map(item =>

                                    <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>

                                ) : null

                            }

                        </Select>

                    </Col>

                </Row>

            </div>

            <div className='map'>

                <Map amapkey="你申请的key"

                    zoom={5}

                    pitch={45}

                    rotation={0}

                    rotateEnable={true}

                    viewMode='3D'

                    features={["bg", "road", "point"]}

                    zooms={[3, 18]}

                    center={{ longitude: 116.397439, latitude: 39.909222 }}

                >

                    <Marker

                        events={

                            {

                                click: (e) => {

                                },

                                // created必须要拥有,用来初始化创建相应对象

                                created: () => {

                                    let auto

                                    let placeSearch

                                    window.AMap.plugin('AMap.Autocomplete', () => {

                                        auto = new window.AMap.Autocomplete({

                                            input: 'tipinput',

                                            pageSize: 10,

                                            pageIndex: 1,

                                            citylimit: true,    // 仅搜索本城市的地名

                                            // city: '', // 限制为只能搜索当前地区的位置  不填全国搜索

                                            outPutDirAuto: true

                                            // type: '汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施'

                                        });

                                    })

                                    // 创建搜索实例

                                    window.AMap.plugin('AMap.PlaceSearch', () => {

                                        placeSearch = new window.AMap.PlaceSearch({

                                            input: 'tipinput',

                                            pageSize: 10,

                                            pageIndex: 1,

                                            // citylimit: true,    // 仅搜索本城市的地名

                                        });

                                    })

                                    window.AMap.event.addListener(auto, "select", (e) => {

                                        placeSearch.search(e.poi.name)

                                    })

                                }

                            }

                        }

                    />

                </Map>

            </div>

        </div>

    )

}

export default MapLocation

结果展现