Google Map Div显示：无||显示：阻止JavaScript（无jQuery） [英] Google Map Div Display:None || Display:Block JavaScript (no jQuery)
问题描述
已解决
$ b $我一天中的大部分时间都在努力弄清楚这个简单的问题，但仍然没有运气。 b
以下是背景知识。
众所周知，在生成Google Map的页面加载时，如果没有隐藏到隐藏的DIV中，它具有适当的渲染。但是，在生成Google Map并将其隐藏在Display：None命令之后，将删除这些属性并需要重新设置并重新设置。我尝试过以各种方式玩代码并制作一个全局变量，但仍然Google Map在重新打开Block之后似乎遇到了这个问题 - 它仅集中在DIV的左上角和地图上在浏览器窗口发生变化后呈现。
理想情况是使用按钮onclick事件更新DIV元素，并且不是浏览器窗口更改。
这些地图在生成后没有调整大小或隐藏时很理想。
另外，我希望大小为真正地为零，然后只在点击按钮后打开块，然后再次点击切换按钮后返回零。我不打算包含所有的HTML代码，它可以被隔离到这个代码：
解决了。测试。 Works。
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< style type =text / css>
/ *总是显式设置地图高度以定义包含地图的DIV元素的大小。 * /
＃map_1 {height：100％;} / *＃[元素名称或ID] * /
html {
height：100％;
保证金：0;
padding：0;
}
body {
height：100％;
保证金：0;
padding：0;
}
< / style>
< / head>
< body>
此线以下的区域< br />
< div id =map_1style =display：none>< / div>
<！ - 确保编号交叉引用了定义的样式 - >
<！ - 确保至少通过px手动定义高度，如果没有定义html和body的％高度 - >
DIV高于此行
< script>
var var_map_1 = null; //为地图＃1创建全局变量
函数initMap（）
{
var_map_1 = new google.maps.Map（document.getElementById（'map_1'），
{
center：{
lat：51.433373，
lng：-.712251
}，
zoom：15
}）;
}
< / script>
<！ - Button Javascript ID>> showhide_map_1<<如果使用多个映射，则复制并更新流量变量ID - >
< button id =showhide_map_1onclick =showhide（）>显示地图< / button>
< script>
函数showhide（）
{
if（
//更新地图DIV每个唯一实例的变量ID
document.getElementById（'map_1'）。style.display = =='none'）
{
document.getElementById（'map_1'）。style.display ='block';
document.getElementById（'map_1'）。style.height ='300px';
//更新地图每个唯一实例的VAR变量ID，必须指示调整大小的变量
google.maps.event.trigger（var_map_1，'resize'）;
//必须指定执行此重新中心行时的行为
var latLng = new google.maps.LatLng（51.433373，-0.712251）;
var_map_1.panTo（latLng）;
//必须在执行此重新居中线时指定缩放
var_map_1.setZoom（15）;
//更新简单样式的按钮
document.getElementById（showhide_map_1）。innerHTML =隐藏地图;
}
else
{
document.getElementById（'map_1'）。style.display ='none';
//更新简单样式的按钮
document.getElementById（showhide_map_1）。innerHTML =显示地图;
}
}
< / script>
< script src =https://maps.googleapis.com/maps/api/js?key=AIzaSyDzCyw9LDNMsZD6IzqWmm8bij5Av-iE9HA&callback=initMap
async defer>< / script>
< / body>
< / html>
所以，根据定义坐标和缩放的API是必须的。但是，坐标几乎是不相关的，因为默认情况下隐藏在隐藏的DIV元素后面。正如你将会看到的那样，代码编辑得更加完善，可以在同一个网页上拥有多个地图。关键的观察是需要为resize函数定义map变量，使用上面描述的lastLng，然后通过map name设置缩放。
这里有一个实例： https://jsfiddle.net/rt01100111/a9rkeqxf/
<！DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< style type =text / css>
/ *总是显式设置地图高度以定义包含地图的DIV元素的大小。 * /
＃map_1 {height：100％;} / *＃[元素名称或ID] * /
html {height：100％; margin：0; padding：0;}
body {height：100％; margin：0; padding：0;}
< / style>< / head>
< body>
DIV在这行之下< br />
< div id =map_1style =display：none>< / div>
<！ - 确保ID交叉引用了定义的样式 - >
<！ - 确保至少通过px手动定义高度，如果没有定义html和body的％高度 - >
DIV高于此行
< script>
var var_map_1 = null; //创建映射＃1的全局变量
函数initMap（）
{
var_map_1 = new google.maps.Map（document.getElementById（'map_1'），
{center ：{lat：51.433373，lng：-.712251}，zoom：15}）;}
< / script>
<！ - Button Javascript ID>> showhide_map_1<<如果使用多个映射，则复制并更新流量变量ID - >
< button id =showhide_map_1onclick =showhide（）>显示地图< / button>
< script>
函数showhide（）
{if（
//更新地图DIV每个唯一实例的变量ID
document.getElementById（'map_1'）。style.display ==='none '）
{document.getElementById（'map_1'）。style.display ='block';
document.getElementById（'map_1'）。style.height ='300px';
//更新地图每个唯一实例的VAR变量ID，必须指示调整大小的变量
google.maps.event.trigger（var_map_1，'resize'）;
//必须指定执行此重新中心行时的行为
var latLng = new google.maps.LatLng（51.433373，-0.712251）;
var_map_1.panTo（latLng）;
//必须在执行此重新居中线时指定缩放
var_map_1.setZoom（15）;
//更新简单样式的按钮
document.getElementById（showhide_map_1）。innerHTML =隐藏地图;
} else {
document.getElementById（'map_1'）。style.display ='none';
//更新简单样式的按钮
document.getElementById（showhide_map_1）。innerHTML =显示地图;}}
< / script>
< script src =https://maps.googleapis.com/maps/api/js?key=AIzaSyDzCyw9LDNMsZD6IzqWmm8bij5Av-iE9HA&callback=initMap
async defer>< /脚本>
< / body>
< / html>
I have spent most of the day trying to figure out this simple problem, but still no luck.
Solved
Here's the background.
As we all know, on the page load of generating the Google Map without being tucked into a hidden DIV has the proper rendering. However, after generating the Google Map and hiding it behind a Display:None command removes the properties and needs to be reset and recentered. I've tried playing with code in an assortment of ways and making a global variable or two, but still the Google Map seems to have this issue after reopening the Block - it is centered to the upper left corner of the DIV and the map only renders after the browser window changes.
The ideal situation is to have the DIV element update with the button onclick event and not the browser window change.
The maps work ideal when not resized or hidden after generating.
Also, I want the size to truly be zero and then only open the block after clicking the button, then going back to zero after clicking the toggle button again.
I'm not going to include all HTML Code, it can be isolated to this code:
Solved. Tested. Works.
<!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>
So, per the API defining the coordinates and the zoom is required. However, the coordinates are virtually irrelevant since by default has the setup of being hidden behind a hidden DIV element. As you will see, the code is more so edited to have the ability for more than one map on the same webpage. Key observations are the need to define the map variable for the resize function, use the lastLng as depicted above, then via map name set the zoom.
Here is a live example: 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>
这篇关于Google Map Div显示：无||显示：阻止JavaScript（无jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
