百度地图BMap实现只显示指定区域

版权说明：本文内容来自https://www.cnblogs.com/zhengxiaoqing/p/5038241.html

最近有同事问到这个问题，百度了下找到一个简单的实现，先记下来便于以后使用。

1.在html代码中设置一个div,设置一个ID如下。

<div id="map_container" style="width: 1000px; height: 500px;"></div>

2.在js代码中编写如下代码

let map = new BMap.Map("map_container");
            let cityName = '广州市';
            map.centerAndZoom(cityName, 8);                     // 初始化地图,设置中心点坐标和地图级别。
            map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
            map.enableScrollWheelZoom();
            map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE ,anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250)}));
            let bdary = new BMap.Boundary();
            bdary.get(cityName, function (rs) {         //获取行政区域
                map.clearOverlays();                    //清除地图覆盖物

                //东西经南北纬的范围
                let EN_JW = "180, 90;";         //东北角
                let NW_JW = "-180,  90;";       //西北角
                let WS_JW = "-180, -90;";       //西南角
                let SE_JW = "180, -90;";        //东南角
                //添加环形遮罩层
                let ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物

                map.addOverlay(ply1);
                //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
                let ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f",fillColor: "" });
                map.addOverlay(ply);

            });

完成，需要注意的是给BMap添加地图的时候需要设置div高宽，不然无法显示。中心点设置也可以通过设置中心点，这里设置是指定名称。
设置中心点方式如下：

let map = new BMap.Map("container",{enableMapClick: false});
                map.centerAndZoom(new BMap.Point(113.274, 23.135), 14);