react 中使用高德地圖 擷取省市區清單

第一步：引入地圖api js ，地圖容器id，初始化

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

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

第二步：

// 擷取省市清單資訊及目前城市地區代碼
export const getMapDate = (_this, id, num) => { // id: 地圖容器，num：表示省市區清單即 1:省，2:市，3:區，4:街道
    // let provinceList = [];
    // let cityCode = null;
    _this.setState({
        mapObj: new window.AMap.Map(id)
    }, () => {
        // 擷取省區清單
        _this.state.mapObj.plugin('AMap.DistrictSearch', () => {
            var districtSearch = new window.AMap.DistrictSearch({
                level: 'country',
                subdistrict: num // 1:省，2:市，3:區，4:街道
            });
            districtSearch.search('中國', (status, result) => {               
                _this.setState({
                    provinceList: result.districtList[0].districtList.sort((a, b) => {return a.adcode - b.adcode})
                });
            });
        });
        // 擷取目前城市地區代碼
        // _this.state.mapObj.plugin('AMap.CitySearch', () => {
        //     var citySearch = new window.AMap.CitySearch();
        //     citySearch.getLocalCity((status, result) => {
        //         if (status === 'complete' && result.info === 'OK') {
        //             cityCode = result.adcode;
        //         }
        //     })
        // })
    });
};
           

根據省市區 查找對應的省市區name

// 根據省市區id 查找 省市區name
export const pCAName = (provinceList, adcode) => {
    const optionsOfCity = [{value: "0", label: "全國"}];//省，市選項生成
    const optionsOfArea = [{value: "0", label: "全國"}];//省，市，區選項生成
    let currentCityName = [];
    let currentCity = [];
    let currentAreaName = [];
    let currentArea = [];
    if (provinceList.length) {        
        provinceList.forEach((item) => {
            let childrenCity = [];
            let childrenArea = [];
            if (item.districtList) {
                item.districtList.forEach((subItem) => {
                    let subChildrenArea = [];
                    if (subItem.districtList) {
                        subItem.districtList.forEach((thirdItem) => {
                            subChildrenArea.push({value: thirdItem.adcode, label: thirdItem.name});
                            if (thirdItem.adcode === String(adcode)) {
                                currentArea = [item.adcode, subItem.adcode, thirdItem.adcode];
                                currentAreaName = [item.name, subItem.name, thirdItem.name];
                            }
                        })
                    }
                    if (subItem.adcode === String(adcode)) {
                        currentCity = [item.adcode, subItem.adcode];
                        currentCityName = [item.name, subItem.name];
                    }
                    childrenCity.push({value: subItem.adcode, label: subItem.name});
                    childrenArea.push({value: subItem.adcode, label: subItem.name, children: subChildrenArea});
                })
            }
            optionsOfCity.push({value: item.adcode, label: item.name, children: childrenCity});
            optionsOfArea.push({value: item.adcode, label: item.name, children: childrenArea});
        })
    }
    return { optionsOfCity, currentCity, currentCityName, optionsOfArea, currentArea, currentAreaName };
};