地图只显示部分区域，其他地区不显示

时间：2024-03-10 07:33:48

使用高德的多边形覆盖物实现

文档：https://lbs.amap.com/api/javascript-api/reference/overlay#polygon

页面引入js文件

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

然后使用

var map = new AMap.Map(\'map-my\', {
        resizeEnable: true,
        zoom: 10,
        center: [121.72292, 31.08463],
        mapStyle: \'amap://styles/blue\', //设置地图的显示样式
    });
    new AMap.DistrictSearch({
        extensions: \'all\',
        subdistrict: 0
    }).search(\'浦东新区\', 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,
            strokeColor: \'#00eeff\',//边框线颜色
            strokeWeight: 1,
            fillColor: \'#13305B\',//遮罩图层颜色
            fillOpacity: 0.9
        });
        polygon.setPath(pathArray);
        map.add(polygon)
    })

显示效果

 

相关文章