Baidu map only shows selected area

1:html

  <div id="container"></div>  

2:js

  //Hint: The following code uses jquery, so if it doesn't work, please refer to it and try  
//The Baidu map api container corresponds to the front-end div name. The front-end should refer to the 2.0 version of the Baidu map api  
//Need to refer to api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js  
var map = new BMap.Map("container", { enableMapClick: false }); // Create a map instance, prohibit clicking on the map basemap  
//set style  
map.setMapStyle({  
    styleJson: [  
        {//Do not display point information  
            "featureType": "poi",  
            "elementType": "all",  
            "stylers": {  
                "color": "#ffffff",  
                "visibility": "off"  
            }  
        }  
    ]  
});  
  
map.disableDragging();//Disable dragging  
map.disableDoubleClickZoom();//Disable double-click zoom  
var blist = [];  
var districtLoading = 0;  
  
function getBoundary() {     
   
    addDistrict("Zhengzhou Jinshui District");

    addDistrict("Zhengzhou Zhongyuan District");   
    
}  
  
/**  
 * Add administrative divisions  
 * @param {} districtName administrative district name  
 * @returns no return value  
 */  
function addDistrict(districtName) {  
    //Use a counter to control the loading process  
    districtLoading++;  
    var bdary = new BMap.Boundary();  
    bdary.get(districtName, function (rs) { //Get the administrative area  
        var count = rs.boundaries.length; //How many points are there in the administrative area  
        if (count === 0) {  
            alert('Failed to get the current input administrative area');  
            return;  
        }  
        for (var i = 0; i < count; i++) {  
            blist.push({ points: rs.boundaries[i], name: districtName });  
        };  
        //Counter -1 after loading the area point  
        districtLoading--;  
        if (districtLoading == 0) {  
            // draw the endpoint after the full load is complete  
            drawBoundary();  
        }  
    });  
}  
  
  
/**  
 * Various mouse event bindings  
 */  
function click(evt) {  
    alert(evt.target.name);  
}  
  
function mouseover (possibly) {  
    evt.target.label.setZIndex(99);  
    evt.target.label.setPosition(evt.point);  
    evt.target.label.show();  
}  
  
function mousemove(evt) {  
    evt.target.label.setPosition(evt.point);  
}  
  
function mouseout (possibly) {  
    evt.target.label.hide();  
}  
  
function drawBoundary() {  
    // point array containing all regions  
    var pointArray = [];  
  
    /*Relevant methods for drawing masking layers  
    *Thinking: First draw a circle on the outermost part of the map of China, encircle all theoretically Chinese territory, and then merge each closed area into it and connect it all to the northwest corner.  
    * This makes a closed polygon that passes through the northwest corner multiple times */  
    //Define the endpoints of the southeast, northwest and northwest of China as the first layer  
    var pNW = {lat: 59.0, lng: 73.0}  
    var pNE = {lat: 59.0, lng: 136.0}  
    var pSE = {lat: 3.0, lng: 136.0}  
    var pSW = {lat: 3.0, lng: 73.0}  
    //Add a closed polygon to the array once, and add the northwest corner as the starting point for drawing the closed area later  
    var pArray = [];  
    pArray.push(pNW);  
    pArray.push (pSW);  
    pArray.push(pSE);  
    pArray.push(pNE);  
    pArray.push(pNW);  
    //loop to add each closed area  
    for (var i = 0; i < blist.length; i++) {  
        //Add a label layer for display  
        var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });  
        label.hide();  
        map.addOverlay(label);  
  
        //Add polygon layer and display  
        var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 5, strokeColor: "#FF0000", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //Create polygon overlay  
        ply.name = blist[i].name;  
        ply.label = label;  
        ply.addEventListener("click", click);  
        ply.addEventListener ("mouseover", mouseover);  
        ply.addEventListener ("mouseout", mouseout);  
        ply.addEventListener("mousemove", mousemove);  
        map.addOverlay(ply);  
  
        //Add name tag layer  
        var centerlabel = new BMap.Label(blist[i].name, { offset: new BMap.Size(0, 0) });  
        centerlabel.setPosition(ply.getBounds().getCenter());  
        map.addOverlay(centerlabel);  
  
        //Add the point to the field of view  
        var path = ply.getPath();  
        pointArray = pointArray.concat(path);  
        //Add the closed area to the masking layer. After each addition, add the northwest corner as the starting point and the last end point of the next addition.  
        pArray = pArray.concat (path);  
        pArray.push (pArray [0]);  
    }  
  
    //Limit the display area, you need to refer to the api library  
    var boundply = new BMap.Polygon(pointArray);  
    BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());  
    map.setViewport(pointArray); //Adjust the field of view   
  
    //add shadow layer  
    var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 0.9 }); //Create a polygon overlay  
    map.addOverlay(plyall);  
}  
  
setTimeout(function () {  
    getBoundary();  
}, 100);