第一步：加载地图组件 AMapLoader.load
第二步：初始化地图组件，在地图上做标记
第三步：打开地图弹窗，new AMap.InfoWindow
第四步：搜索弹窗上的select，调用接口，返回数据展示在select上（后端模糊搜索 + 防抖）
第五步：选择心仪地址，进行回调
import AMapLoader from '@amap/amap-jsapi-loader'
import React, { useEffect, useRef, useState } from 'react'
import debounce from 'lodash/debounce'const MapSelect = (props) => {const { value } = propsconst geocoder = useRef<any>()const map = useRef<any>()const [AMap, setAMap] = useState(null)const mapRef = useRef<any>()useEffect(() => {AMapLoader.load({//首次调用 loadkey: 'xxx', //首次load key为必填version: '2.0',plugins: ['AMap.Geocoder'],}).then((_AMap) => {// 组件初始化之后将获取到的AMap对象setAMap(_AMap)const AMap = _AMapgeocoder.current = new AMap.Geocoder({})initMap()})}, [])//初始化地图const initMap = () => {const { longitude, latitude, text } = value || {}const center =longitude && latitude ? new AMap.LngLat(longitude, latitude) : nullmap.current = new AMap.Map(mapRef.current, {resizeEnable: true,jogEnable: false,zoom: 14,center,})center && updateMark(center, text) // 地图上做标记}// 更新markerconst updateMark = (center, text) => {}const debounceSearchApi = debounce((value: string) => {searchByApi(value)}, 300)// 使用api查询搜索出来的地址const searchByApi = async (value: string) => {}// 打开地图弹窗，展示地图组件const setInfoWindowContent = (e) => {infoWindow = new AMap.InfoWindow({isCustom: true,content,offset: new AMap.Pixel(0, -40),})infoWindow?.open(map.current, location)map?.current?.setCenter(center)map?.current?.setZoom(14)}return (<><SearchonSearch={openSelectLngLat}placeholder="请输入地址"value={text}onChange={handleInputChange}onCompositionStart={handleCompositionStart}onCompositionEnd={handleCompositionEnd}style={{ width, ...style }}/><divonMouseUp={onMouseUp}onMouseMove={onMouseMove}onMouseDown={onMouseDown}onClick={() => {if (!isMove) {openSelectLngLat()}}}><div ref={mapRef} />{!(longitude && latitude) && (<div>{icon && <img style={{ width: 28, height: 28 }} src={icon} />}<span>{markTitle || '去标注'}</span></div>)}</div><Modaltext={selectLngLatModalText}visible={selectLngLatModalVisible}isMarkTextUseSelectAddress={isMarkTextUseSelectAddress}info={selectLngLatModalLngLat}onClose={closeSelectLngLatModal}onChange={ModalGetLngLat}bindLatestAddress={(getLatestAddress && (updateAddress as any)) || null}/></>)
}export default MapSelect
弹框
<Modalvisible={visible}destroyOnCloseonCancel={handleClose}onOk={handleSubmit}okText="保存位置"title="设置定位"><div><Selectstyle={{ width: '720px', marginBottom: '10px' }}showSearchdefaultValue={text}placeholder="请输入需要查找的位置"onSearch={(value) => {debounceSearchApi(value)}}options={addressOptions}filterOption={false}onChange={handleChangeOptions}/></div><div><div style={{ width: '720px', height: '600px' }} ref={modalMapRef} /></div></Modal>