Hide and re-display Baidu map. The map is incomplete. Only a small part in the upper left corner is displayed. The map is incomplete.

Hide and re-display Baidu map. The map is incomplete. Only a small part in the upper left corner is displayed. The map is incomplete.
Problem description: I put a mapDiv in DIV1 that shows Baidu maps.
The problem occurs. When initializing (DIV1 is displayed for the first time), the map is displayed normally,

When it is hidden and displayed again, an error occurs in the map. The map is incomplete and only a small part in the upper left corner is displayed.

Jsp code:

<! -- Display the map and obtain the longitude and latitude start -->

<Div id = "mapModel" class = "modal fade" tabindex = "-1" role = "dialog"
Aria-labelledby = "mapModalLabel" aria-hidden = "true">
<Div class = "modal-dialog">
<Div class = "modal-content bg">
<Div class = "modal-header bj_table">
<Button type = "button" class = "close" data-dismiss = "modal"
Aria-hidden = "true"> × </button>
<H2 class = "modal-title" id = "mapModalLabel"> obtain latitude and longitude: </Div>
<Div class = "modal-body">
<H2> drag the cover to the target location to select the longitude and latitude: <Div id = "mapContent" style = "width: 540px; height: 400px; margin-top: 15px"> </div>

</Div>

</Div>
</Div>
</Div>
<! -- Display the map and get the latitude and longitude end -->

Error code:

Js:

// Obtain the longitude and latitude coordinates
$ ("# GetCoordinate"). click (function (){

// Create a map
InitMarker = drawMap ($ ('# longpolling'). val (), $ ('# latitude'). val ());

InitMarker. addEventListener ("dragend", function (e ){
If (confirm ('Are you sure this location? ')){
$ ('# Mapmodel'). modal ('hide ');
$ ('# Longyun'). val (e. point. lng );
$ ('# Latitude'). val (e. point. lat );

}
});

});

// Create a map function:
Function drawMap (longpolling, latitude ){

// If the longitude and latitude are empty, set yanjiao prison as the central point of the map.
If (longpolling = "" | latitude = ""){
Longpolling = "116.853944 ";
Latitude = "39.934043 ";
}

$ ('# Mapmodel'). modal ();
// Define a central point coordinate
Var initPoint = new BMap. Point (longpolling, latitude );

Var map = new BMap. Map ("mapContent"); // create a map in the Baidu Map container
Map. centerAndZoom (initPoint, 14); // set the center and coordinates of the map and display the map in the map container
// Window. map = map; // store the map variable in the global

Map. enableScrollWheelZoom (); // enables zoom in and out of map Rollers

Var initMarker = new BMap. Marker (initPoint); // create Annotation
Map. clearOverlays ();
Map. addOverlay (initMarker );
InitMarker. enableDragging ();

Map. panBy (270,200); // The number of pixels (width, height) at the center offset is 1/2 of the div width height;


Return initMarker;
}

The red font indicates an error code.

Correct code:

Js:

Var map = new BMap. Map ("mapContent"); // create a map in the Baidu Map container

// Obtain the longitude and latitude coordinates
$ ("# GetCoordinate"). click (function (){

// Create a map
InitMarker = drawMap (Map,$ ('# Longyun'). val (), $ (' # latitude '). val ());

InitMarker. addEventListener ("dragend", function (e ){
If (confirm ('Are you sure this location? ')){
// $ ('# Mapcontent'). hide ();
$ ('# Mapmodel'). modal ('hide ');
// Console. log (e. point. lng + "," + e. point. lat );
$ ('# Longyun'). val (e. point. lng );
$ ('# Latitude'). val (e. point. lat );

}
});

});

// Create a map function:
Function drawMap (Map,Longpolling, latitude ){

// If the longitude and latitude are empty, set yanjiao prison as the central point of the map.
If (longpolling = "" | latitude = ""){
Longpolling = "116.853944 ";
Latitude = "39.934043 ";
}

$ ('# Mapmodel'). modal ();
// Define a central point coordinate
Var initPoint = new BMap. Point (longpolling, latitude );

// Var map = new BMap. Map ("mapContent"); // create a map in the Baidu Map containerComment out this line of code
Map. centerAndZoom (initPoint, 14); // set the center and coordinates of the map and display the map in the map container
// Window. map = map; // store the map variable in the global

Map. enableScrollWheelZoom (); // enables zoom in and out of map Rollers

Var initMarker = new BMap. Marker (initPoint); // create Annotation
Map. clearOverlays ();
Map. addOverlay (initMarker );
InitMarker. enableDragging ();

Map. panBy (270,200); // The number of pixels (width, height) at the center offset is 1/2 of the div width height;


Return initMarker;
}

Error Cause Analysis: var map = new BMap. map ("mapContent"); you only need to initialize the map once. No matter how you operate the Map in the future, you only need to create the map once. If you create the Map multiple times, the map will be displayed incorrectly.