使用高德地图画区且标记不同背景色

1.引入cdn

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己的apik&plugin=AMap.DistrictSearch"></script>

2.页面使用 如果是单独的js的话  会简单很多 这里就是结合vue来使用 下面就以上海市为例

<template>
    <div>
        <h3>地图测试</h3>
        <div id="container" style="width:70%;margin:0 auto;height:700px;"></div> 
    </div>
</template>
<script>
export default {
    data(){
        return{
            dataArr:[
                {"unitArea": '上海市', "cp": [121.472644, 31.231706],countNumber: 0},
                {"unitArea": '上海城区', "cp": [121.472644, 31.231706],countNumber: 0},
                {"unitArea": '黄浦区', "cp": [121.490317, 31.222771],countNumber: 0},
                {"unitArea": '徐汇区', "cp": [121.43752, 31.179973],countNumber: 0},
                {"unitArea": '长宁区', "cp": [121.42219999999998, 31.218123],countNumber: 0},
                {"unitArea": '静安区', "cp": [121.44822399999998, 31.229003],countNumber: 0},
                {"unitArea": '普陀区', "cp": [121.39249899999999, 31.241701],countNumber: 0},
                {"unitArea": '虹口区', "cp": [121.49183199999999, 31.26097],countNumber: 0},
                {"unitArea": '杨浦区', "cp": [121.52279699999997, 31.270755],countNumber: 0},
                {"unitArea": '宝山区', "cp": [121.489934, 31.398896],countNumber: 0},
                {"unitArea": '闵行区', "cp": [121.37597199999999, 31.111658],countNumber: 0},
                {"unitArea": '嘉定区', "cp": [121.25033300000001, 31.383524],countNumber: 0},
                {"unitArea": '浦东新区', "cp": [121.56770599999999, 31.245944],countNumber: 0},
                {"unitArea": '松江区', "cp": [121.223543, 31.03047],countNumber: 0},
                {"unitArea": '金山区', "cp": [121.330736, 30.724697],countNumber: 0},
                {"unitArea": '青浦区', "cp": [121.113021, 31.151209],countNumber: 0},
                {"unitArea": '奉贤区', "cp": [121.45847200000003, 30.912345],countNumber: 0},
                {"unitArea": '崇明区', "cp": [121.397516, 31.626946],countNumber: 0}
            ]
        }
    },
    methods:{
        init(){
            var map = new AMap.Map('container',{
                zoom:12,
                center: [121.47, 31.23],
                mapStyle: "amap://styles/2c032b096ee12b01075395284e6808ad"
            });
            this.randerMapFun(map,this.dataArr)
        },
        //渲染地图的方法
        randerMapFun(map,dataArr){
            map.clearMap();
            // //创建地图,设定地图的中心点和级别   上海 center:[121.47,31.23],
            //画区
            var district = new AMap.DistrictSearch({
                // 返回行政区边界坐标等具体信息
                extensions: 'all',
                subdistrict: 1,
                // 设置查询行政区级别为 区
                level: 'city'
                // district
            })
            district.search('021', function (status, result) {
            })
            
            for (var k = 0; k < dataArr.length; k++) {
               
                district.search(dataArr[k].unitArea, function (status, result) {
                    var bounds = result.districtList[0].boundaries
                    var polygons = []
                    if (bounds) {
                         var r=Math.floor(Math.random()*255);
                        var g=Math.floor(Math.random()*255);
                        var b=Math.floor(Math.random()*255);
                        var rgb='rgb('+r+','+g+','+b+')';
                        for (var i = 0, l = bounds.length; i < l; i++) {
                            //生成行政区划polygon
                            var polygon = new AMap.Polygon({
                                map: map,
                                strokeWeight: 1,
                                path: bounds[i],
                                fillOpacity:.8,
                                fillColor:rgb,
                                strokeColor: '#CC66CC'
                            })
                            polygons.push(polygon)
                        }
                        // 地图自适应
                        // map.setFitView()
                    }
                })
                this.addIcon(dataArr[k].cp[0], dataArr[k].cp[1], dataArr[k].unitArea, dataArr[k].countNumber,map)
            }
            //画上海
            new AMap.DistrictSearch({
                extensions: 'all',
                subdistrict: 0
            }).search('021', function (status, result) {
                // 外多边形坐标数组和内多边形坐标数组
                var outer = [
                    new AMap.LngLat(-360, 90, true),
                    new AMap.LngLat(-360, -90, true),
                    new AMap.LngLat(360, -90, true),
                    new AMap.LngLat(360, 90, true),
                ];
                var holes = result.districtList[0].boundaries
                var pathArray = [
                    outer
                ];
                pathArray.push.apply(pathArray, holes)
                var polygon = new AMap.Polygon({
                    pathL: pathArray,
                    //线条颜色，使用16进制颜色代码赋值。默认值为#006600
                    strokeColor: 'red',
                    strokeWeight: 1,
                    //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
                    fillColor: 'rgba(256,256,256)',
                    //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
                    fillOpacity: 1,
                    strokeDasharray: [10, 2, 10]
                });
                polygon.setPath(pathArray);
                map.add(polygon);
            });
        },
        addIcon(left, right, unitArea, countNumber,map) {
            var viaMarker = new AMap.Marker({
                position: new AMap.LngLat(left, right),
                // 将一张图片的地址设置为 icon
                // icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
                // icon: SYS_CTX + '/views/images/tpzzz.png',
                // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
                offset: new AMap.Pixel(-30, -20),
                content: "<div class='info'><span>" + unitArea + "</span><span class='number'>" + countNumber + "</span></div>"
            });
            map.add([viaMarker]);
        }
    },
    mounted(){
        this.$nextTick(() => {
            this.init()
        });
    }
}
</script>
<style lang="scss">
    .info{
        width: 140px;
        height: 40px;
        display: flex;
        span{
            width:50%;
            text-align: center;
            background: #ffffff;
            line-height: 40px;
        }
        .number{
            background:red
        }
    }
</style>