react + ant design 项目中使用高德地图

第一步：在head标签中引入高德地图api和key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=bca3c8db7e16261dadc9b149bb686e71"></script>

第二步：定义地图容器id

<div id="add-institution-container" name="container" tabIndex="0"/>

// 机构地址相关
const provinceOptions = provinceList.map(item => <Option key={item.name}>{item.name}</Option>);
const cityOptions = cityList.map(item => <Option key={item.name}>{item.name}</Option>);
const districtOptions = districtList.map(item => <Option key={item.name}>{item.name}</Option>);
const streetOptions = streetList.map(item => <Option key={item.name}>{item.name}</Option>);
const addressChange = (value) => {
    if (!value) {
        return
    }
    let keyword = "";
    keyword = keyword + area.province + area.city + area.district + area.street;
    keyword = keyword + value;
    // 清除已有标记点
    mapObj.remove(markers);
    mapObj.plugin('AMap.Geocoder', function () {
        const geocoder = new window.AMap.Geocoder({});
        const marker = new window.AMap.Marker({
            map: mapObj,
            bubble: true
        });
        geocoder.getLocation(keyword, (status_, result_) => {
            if (status_ === 'complete' && result_.info === 'OK') {
                geocoder.getAddress([result_.geocodes[0].location.lng, result_.geocodes[0].location.lat], (status, result) => {
                    if (status === 'complete' && result.info === 'OK') {
                        // 经纬度写入
                        setXY({x: result_.geocodes[0].location.lng, y: result_.geocodes[0].location.lat});
                        console.log(result_.geocodes[0].location);
                        // 生成当前标记点
                        marker.setPosition(result_.geocodes[0].location);
                        mapObj.setCenter(marker.getPosition());
                        setMarkers(marker);
                        // address字段(定位点地址)写入
                        setFormattedAddress(area.street ? keyword : result.regeocode.addressComponent.province + result.regeocode.addressComponent.city + result.regeocode.addressComponent.district + result.regeocode.addressComponent.township + keyword);
                        // 其他地址信息写入
                        setArea(5, result.regeocode.addressComponent);
                    }
                });
            }
        });
    });
};