高德地图js开发，给城市某个区添加颜色

index.less

.amap-logo,
.amap-copyright {
    display: none !important;
}

#container {
    width: 600px;
    height: 600px;
}

@keyframes fadeToBottom {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
}


.factory {
    width: 1px;
    height: 1px;
    position: relative;

    .factory-in {
        // display: none;
        width: 90px;
        padding: 5px;
        font-size: 12px;
        background-color: #fff;
        border: 1px solid orangered;
        border-radius: 5px;
        text-align: center;
        animation: fadeToBottom 1s 0s both;
        position: absolute;
        left: 50%;
        margin-left: -38px;
        margin-top: -20px;

        h5 {
            font-weight: bold;
            line-height: 12px;
            font-size: 12px;
        }

        p {
            margin-bottom: 0;
        }

        &::after {
            content: '';
            position: absolute;
            display: block;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid orangered;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

index.js

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect } from 'react';
import './index.less';

function Amap3() {
    const city = {
        center: [113.936543, 22.540771],
        code: '440305',
        factory: [
            {
                name: '荔湾',
                center: [113.893485, 22.497821],
                data: 100,
            },
            {
                name: '腾讯大厦',
                center: [113.934497, 22.540517],
                data: 300,
            },
            {
                name: '高新园地铁站',
                center: [113.953842, 22.540236],
                data: 400,
            },
        ],
    };

    const init = () => {
        // 地图完全加载完的处理
        window.amapCallback = function () {
            const { AMap } = window;

            // 初始化默认定位
            const map = new AMap.Map('container', {
                // animateEnable: false, //是否允许平移动画
                zoomEnable: false, //是否允许缩放
                dragEnable: false, //是否允许拖拽
                zoom: 12,
                center: city.center,
                mapStyle: 'amap://styles/c9f95da26ef2a12ee978baea669f3bd6', //使用自定义地图样式
            });

            // 440305 表示南山区，还有其他区域的编码可在 AMap_adcode_citycode.xlsx 查询到，对应官网下载地址 https://lbs.amap.com/api/javascript-api/download
            new AMap.DistrictSearch({
                // 关键字对应的行政区级别，共有5种级别
                level: 'province',
                //  是否显示下级行政区级数，1表示返回下一级行政区
                subdistrict: 0,
                // 返回行政区边界坐标点
                extensions: 'all',
            }).search(city.code, function (status, result) {
                var holes = result.districtList[0].boundaries;
                new AMap.Polygon({
                    map: map,
                    path: holes, //轮廓线的节点坐标数组
                    strokeWeight: 2, // 轮廓线宽度
                    strokeColor: '#256edc', //线条颜色
                    fillOpacity: 0.2, //透明度
                    fillColor: '#256edc', //填充颜色
                });
            });

            // 每两秒执行一次位置更新，并且显示工厂数据
            let num = 0;
            let marker = null;
            const getCenter = () => {
                if (num > city.factory.length - 1) {
                    num = 0;
                }
                num = num > city.factory.length - 1 ? 0 : num++;
                // 删除之前的marker点
                if (marker) {
                    map.remove(marker);
                }
                // 单个工厂信息获取
                const { center, name, data } = city.factory[num];
                const content = `<div class="factory">
                                    <div class="factory-in">
                                        <h5>${name}</h5>
                                        <p>数据：${data}</p>
                                    </div>
                                </div>`;
                marker = new AMap.Marker({
                    content: content,
                    position: center,
                });

                map.add(marker);
                map.setCenter(center);
            };

            getCenter();
            setInterval(() => {
                num++;
                getCenter();
            }, 2000);
        };

        // 动态生成script标签并把地图加载进来
        const scriptEl = document.createElement('script');
        scriptEl.src =
            'https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图key&plugin=AMap.DistrictSearch&callback=amapCallback';
        document.body.appendChild(scriptEl);
    };

    useEffect(() => {
        init();
    }, []);

    return (
        <>
            <div id="container"></div>
        </>
    );
}
export default Amap3;

效果截图