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

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

文档: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)
    })

显示效果

 

posted @ 2020-08-25 11:31  何以平天下  阅读(3832)  评论(0编辑  收藏  举报