首先需要在项目中引入高德地图的JS API，可以在官网上申请并获取API key进行使用。具体步骤如下：
- 安装高德地图的JS API，可以通过npm安装：
npm install --save @amap/amap-jsapi-loader
2.新建一个文件名字随便起（map.tsx）
import AMapLoader from '@amap/amap-jsapi-loader'; import { Button, Input } from 'antd'; import { useEffect, useState } from 'react'; import './MapContainer.css'; // import { compact } from 'lodash'; let data = JSON.parse(sessionStorage.getItem('datas')); const MapComponent = (props) => { const [map, setMap] = useState({}); const [keyword, setKeyword] = useState(''); const [selectedLocation, setSelectedLocation] = useState({}); const [selectedAddress, setSelectedAddress] = useState(''); useEffect(() => { window._AMapSecurityConfig = { securityJsCode: 'a69dcefa5bcfb7647713f4285773aea5', //密钥 }; AMapLoader.load({ key: '2ac9de89b635e0caef82af0edf4248cf', version: '1.4.15', plugins: ['AMap.PlaceSearch'], }) .then((AMap) => { const mapInstance = new AMap.Map('container', { viewMode: '2D', zoom: 11, center: [data.lng, data.lat], layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()], }); mapInstance.on('click', (e) => { const lnglat = e.lnglat; const lng = e.lnglat.getLng(); const lat = e.lnglat.getLat(); console.log([e.lnglat.lng, e.lnglat.lat]); setSelectedLocation({ lng, lat }); setSelectedAddress(''); AMap.plugin('AMap.Geocoder', function () { const geocoder = new AMap.Geocoder({ city: '', // 城市为空表示全国范围内逆地理编码 }); geocoder.getAddress(lnglat, function (status, result) { if (status === 'complete' && result.regeocode) { const address = result.regeocode.formattedAddress || ''; setSelectedAddress(address); console.log(address); const lng = e.lnglat.getLng(); const lat = e.lnglat.getLat(); props.onMapClick(lng, lat, address); setKeyword(address); } }); }); }); setMap(mapInstance); }) .catch((e) => { console.log(e); }); }, []); const search = () => { if (keyword) { AMapLoader.load({ key: '2ac9de89b635e0caef82af0edf4248cf', version: '1.4.15', plugins: ['AMap.PlaceSearch'], }) .then((AMap) => { const placeSearch = new AMap.PlaceSearch({ city: '', map, }); placeSearch.search(keyword, (status, result) => { console.log(status, result); if (status === 'complete' && result.info === 'OK') { const pois = result.poiList.pois; if (pois.length > 0) { const { location } = pois[0]; map.setCenter(location); } } else { console.log('搜索失败或无结果'); } }); }) .catch((e) => { console.log(e); }); } }; return ( <div> <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between', height: '50px', }} > <Input style={{ width: '60%', height: '30px' }} value={keyword} onChange={(e) => { setKeyword(e.target.value); }} id="map" /> <Button onClick={search} disabled={!keyword}> 搜索 </Button> </div> <div id="container" className="map" style={{ height: '400px', borderRadius: '5px' }}></div> </div> ); }; export default MapComponent;
3.在需要的地方引用
import MapComponent from './map';
4.在指定的html中放入
<MapComponent onMapClick={map} />
5.map事件：
//地图事件 const map = (lng, lat, addresss) => { setLng(lng); setLat(lat); setAddress(addresss); };
代码中使用了useEffect和useRef钩子分别进行地图的初始化和搜索操作，通过AMapLoader.load方法加载高德地图JS API并初始化地图，创建搜索对象和搜索按钮，并给搜索按钮绑定点击事件，当点击搜索按钮时触发搜索操作。在代码中还使用了Ant Design中的Input和Button组件作为搜索界面的元素。
需要注意的是，使用高德地图API需要先申请API key，并在代码中传入。
