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(evt) {  
    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(evt) {  
    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 theoretical Chinese territory, and then merge each closed area 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 = {years: 59.0, lng: 73.0}  
    var pNE = {years: 59.0, lng: 136.0}  
    var pSE = {years: 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);