我花了大部分时间试图找出这个简单的问题，但仍然没有运气。
这是背景。
众所周知，在生成Google Map而不被隐藏到隐藏的DIV中的页面加载具有正确的渲染。但是，在生成Google Map并将其隐藏在Display：None命令后面会删除属性并需要重置和重新定位。我已经尝试过各种各样的代码来玩代码并制作一个或两个全局变量，但是在重新打开Block之后Google Map似乎还有这个问题 - 它只在DIV的左上角和地图上居中在浏览器窗口更改后呈现。
理想的情况是使用按钮onclick事件更新DIV元素，并且不浏览器窗口更改。
在生成后未调整大小或隐藏时，地图非常理想。
此外，我希望大小真正为零，然后只需在单击按钮后打开块，然后再次单击切换按钮后返回到零。
我不打算包含所有HTML代码，它可以与此代码隔离：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/* Always set the map height explicitly to define the size of the DIV element that contains the map. */
#map_1 {height: 100%;} /* #[element name or ID] */
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
DIV IS BELOW THIS LINE<br />
<div id="map_1" style="display:none"></div>
<!-- Make sure the ID cross references to the defined style -->
<!-- Make sure to at least manually define via px the height if not defining the % height of the html and body -->
DIV IS ABOVE THIS LINE
<script>
var var_map_1 = null; //Create global variable for map #1
function initMap()
{
var_map_1 = new google.maps.Map(document.getElementById('map_1'),
{
center: {
lat: 51.433373,
lng: -.712251
},
zoom: 15
});
}
</script>
<!-- Button Javascript ID is >> showhide_map_1 << copy and update flowthrough variable ID if using more than one map -->
<button id="showhide_map_1" onclick="showhide()">Show Map</button>
<script>
function showhide()
{
if (
// Update map DIV variable ID per unique instance
document.getElementById('map_1').style.display === 'none')
{
document.getElementById('map_1').style.display = 'block';
document.getElementById('map_1').style.height = '300px';
// Update map VAR variable ID per unique instance, must indicate which variable to resize
google.maps.event.trigger(var_map_1, 'resize');
// Must then specify the go to when this re-center line is executed
var latLng = new google.maps.LatLng(51.433373, -0.712251);
var_map_1.panTo(latLng);
// Must then specify the zoom when this re-center line is executed
var_map_1.setZoom(15);
// Update the button for simple style
document.getElementById("showhide_map_1").innerHTML = "Hide Map";
}
else
{
document.getElementById('map_1').style.display = 'none';
// Update the button for simple style
document.getElementById("showhide_map_1").innerHTML = "Show Map";
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzCyw9LDNMsZD6IzqWmm8bij5Av-iE9HA&callback=initMap"
async defer></script>
</body>
</html>
答案 0 :(得分：0)
因此，根据定义坐标的API和缩放是必需的。但是，坐标实际上是无关紧要的，因为默认情况下隐藏的设置隐藏在隐藏的DIV元素后面。正如您将看到的，代码更加如此编辑，以便能够在同一网页上显示多个地图。关键的观察是需要为resize函数定义map变量，使用如上所述的lastLng，然后通过map name设置缩放。
以下是一个实例：https://jsfiddle.net/rt01100111/a9rkeqxf/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
/* Always set the map height explicitly to define the size of the DIV element that contains the map. */
#map_1 {height: 100%;} /* #[element name or ID] */
html {height: 100%; margin: 0;padding: 0;}
body {height: 100%; margin: 0;padding: 0;}
</style></head>
<body>
DIV IS BELOW THIS LINE<br />
<div id="map_1" style="display:none"></div>
<!-- Make sure the ID cross references to the defined style -->
<!-- Make sure to at least manually define via px the height if not defining the % height of the html and body -->
DIV IS ABOVE THIS LINE
<script>
var var_map_1 = null; //Create global variable for map #1
function initMap()
{
var_map_1 = new google.maps.Map(document.getElementById('map_1'),
{center: {lat: 51.433373, lng: -.712251}, zoom: 15});}
</script>
<!-- Button Javascript ID is >> showhide_map_1 << copy and update flowthrough variable ID if using more than one map -->
<button id="showhide_map_1" onclick="showhide()">Show Map</button>
<script>
function showhide()
{if (
// Update map DIV variable ID per unique instance
document.getElementById('map_1').style.display === 'none')
{document.getElementById('map_1').style.display = 'block';
document.getElementById('map_1').style.height = '300px';
// Update map VAR variable ID per unique instance, must indicate which variable to resize
google.maps.event.trigger(var_map_1, 'resize');
// Must then specify the go to when this re-center line is executed
var latLng = new google.maps.LatLng(51.433373, -0.712251);
var_map_1.panTo(latLng);
// Must then specify the zoom when this re-center line is executed
var_map_1.setZoom(15);
// Update the button for simple style
document.getElementById("showhide_map_1").innerHTML = "Hide Map";
}else{
document.getElementById('map_1').style.display = 'none';
// Update the button for simple style
document.getElementById("showhide_map_1").innerHTML = "Show Map";}}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzCyw9LDNMsZD6IzqWmm8bij5Av-iE9HA&callback=initMap"
async defer></script>
</body>
</html>