先上一個(gè)示例圖

image.png

使用React+Antd V4+百度地圖，在地圖上，添加一個(gè)可以輸入地址，檢索的控件。

先看React組件

import React from 'react';
import BMap from 'BMap';
import {AutoComplete, Button, Form, Input, InputNumber, Row} from "antd";
import Ajax from "@utils/Ajax";
interface IState {
    pointMap: any,
    autoOptions: Array<any>,
    autoValue: string
}
export default class PointMap extends React.Component<IProps, IState> {
    constructor(props: any) {
        super(props);
    }
    public readonly state: Readonly<IState> = {
        pointMap: '',
        autoOptions: [],
        autoValue: ''
    }
    componentDidMount(): void {
        this.initMap()
    }

    public initMap= () => {
        const { gpsx, gpsy } = this.props
        let map = new BMap.Map('mapContainer')
        this.setState({ pointMap: map })
        map.centerAndZoom(new BMap.Point(106.552566, 29.55642), 15);// 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
        
        map.enableScrollWheelZoom(true); // 開(kāi)啟鼠標(biāo)滾輪縮放
        let overviewControl = new BMap.OverviewMapControl({ anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT', isOpen: true });
        map.addControl(overviewControl);

        map.addEventListener('click', (e: any) =>{
            map.clearOverlays();
            let marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));  // 創(chuàng)建標(biāo)注
            map.addOverlay(marker);
        })
    }
    handleSearch= (searchText: string) => {
//http://api.map.baidu.com/place/v2/suggestion?query=天安門(mén)&region=北京&city_limit=true&output=json&ak=你的ak //GET請(qǐng)求
//這是我去后臺(tái)服務(wù)器上請(qǐng)求的地址檢索，因?yàn)樵谇岸酥苯诱?qǐng)求會(huì)報(bào)跨域的問(wèn)題
        this.setState({ autoValue: searchText, autoOptions: [] })
        Ajax.post('/biz/restTemplate/getUrl', {query: searchText, region: '重慶'}, { dataType: 'form' }, (data: any) => {
            if (data.data.status === 0) {
                this.setState({ autoOptions: data.data.result })
            }
        })
    }
    handleSelect= (value: string) => {
        const { autoOptions, pointMap } = this.state
        this.setState({ autoValue: value })
        let select = autoOptions.filter((item: any) => item.name === value)
        if (select.length > 0 && select[0].location) {
            pointMap.clearOverlays();
            let pointItem = select[0]
            let point = {
                latitude: pointItem.location.lat,
                longitude: pointItem.location.lng
            }
            pointMap.centerAndZoom(new BMap.Point(point.longitude, point.latitude), 15);
            let marker = new BMap.Marker(new BMap.Point(point.longitude, point.latitude));  // 創(chuàng)建標(biāo)注
            pointMap.addOverlay(marker);
        }
    }
    render(): React.ReactNode {
        const { autoOptions, autoValue } = this.state
        const options = autoOptions.map((item: any, index: number) => ({ key: item.uid !== '' ? item.uid : index, value: item.name }))
        return <div>
            <Row style={{ position: 'absolute', zIndex: 10, top: 120, left: 50}} >
                <AutoComplete
                    dropdownMatchSelectWidth={252}
                    style={{ width: 300 }}
                    options={options}
                    value={autoValue}
                    onSelect={this.handleSelect}
                    onChange={this.handleSearch}
                >
                    <Input.Search placeholder="查詢地址" enterButton="查詢" />
                </AutoComplete>
            </Row>
            <div id="mapContainer" style={{ height: 600, width: '100%' }} />
        </div>;
    }
}

這里沒(méi)有使用百度地圖API中的添加自定義控件，因?yàn)楸容^麻煩的一點(diǎn)是要使用document來(lái)創(chuàng)建節(jié)點(diǎn)，而且樣式也需要自己寫(xiě)，點(diǎn)擊事件也要麻煩一點(diǎn)?？梢灾苯釉诮M件里面寫(xiě)，調(diào)整一下要添加的組件的定位就可以了