Javascript 谷歌地图显示：无问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4700594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps Display:None Problem
提问by Quintin Hobson
I'm trying to set up a Google map that will display when a link is clicked and then hide when another link is clicked. Everything works fine, except when I show the map from display:none, it doesn't display properly.
我正在尝试设置一个 Google 地图，该地图将在单击链接时显示，然后在单击另一个链接时隐藏。一切正常，除了当我从 display:none 显示地图时，它无法正确显示。
I read about using google.maps.event.trigger(map, 'resize'); but I'm not proficient enough with Javascript and JQuery to know how to add it in.
我读到使用 google.maps.event.trigger(map, 'resize'); 但我对 Javascript 和 JQuery 不够精通，不知道如何添加它。
Here's the code I've been using:
这是我一直在使用的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#viewmap {
position:relative;
width:944px;
float:left;
display:none;
}
#hidemap {
position:relative;
width:944px;
float:left;
display:block;
}
#map_canvas {
position:relative;
float:left;
width:944px;
height:300px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-27.999673,153.42855);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = 'blah';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == 'block'){
document.getElementById(viewmap).style.display = 'none';
}else{
document.getElementById(viewmap).style.display = 'block';
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == 'none'){
document.getElementById(hidemap).style.display = 'block';
}else{
document.getElementById(hidemap).style.display = 'none';
}
}
</script>
</head>
<body>
<div id="viewmap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a>
<div id="map_canvas"></div>
</div>
<div id="hidemap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
</div>
</body>
</html>
Any help would be much appreciated,
任何帮助将非常感激，
Quintin
昆汀
回答by vaelico
I ran into this same problem today and eventually found this at the official Google Maps Javascript API V3 Reference:
我今天遇到了同样的问题，最终在官方的Google Maps Javascript API V3 Reference 中找到了这个：
Developers should trigger this event on the map when the div changes size:
google.maps.event.trigger(map, 'resize').
当div改变大小时，开发者应该在地图上触发这个事件：
google.maps.event.trigger(map, 'resize')。
As display:noneis equivalent to leaving the <div>with size 0, changing it to display:blockbecomes in fact a change of size, making therefore necessary to trigger the map resize event.
作为display:none等同于离开<div>用大小为0，将其改为display:block实际上成为大小的变化，使得因此，有必要触发地图resize事件。
Worked like a charm for me.
对我来说就像一种魅力。
UPDATE 2018-05-22
更新 2018-05-22
With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Mapclass.
随着 Maps JavaScript API 3.32 版中的新渲染器版本，resize 事件不再是Map类的一部分。
The documentation states
该文件指出
When the map is resized, the map center is fixed
The full-screen control now preserves center.
There is no longer any need to trigger the resize event manually.
当地图调整大小时，地图中心是固定的
全屏控制现在保留中心。
不再需要手动触发调整大小事件。
source: https://developers.google.com/maps/documentation/javascript/new-renderer
来源：https: //developers.google.com/maps/documentation/javascript/new-renderer
google.maps.event.trigger(map, "resize");doesn't have any effect starting from version 3.32
google.maps.event.trigger(map, "resize");从版本 3.32 开始没有任何影响
回答by javiertoledos
This problems also happens with the jquery tabs, instead of applying "display:none", you can try hidding the map in this way:
jquery 选项卡也会出现此问题，您可以尝试以这种方式隐藏地图，而不是应用“display:none”：
Add the following styles when you are trying to hide the map, instead of using display:none
尝试隐藏地图时添加以下样式，而不是使用 display:none
position: absolute;
left: -100%;
You can also add transitions like: transition: left 1s ease;
您还可以添加过渡效果，如：过渡：左 1s 缓动；
You can try with google event listener triggering it after you display the map:
您可以在显示地图后尝试使用 google 事件侦听器触发它：
<script type="text/javascript">
var map; //I placed here the map variable so other functions can see it.
var latlng = new google.maps.LatLng(-27.999673,153.42855);
// in order to center again the map...
function initialize() {
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = 'blah';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == 'block'){
document.getElementById(viewmap).style.display = 'none';
}else{
document.getElementById(viewmap).style.display = 'block';
//here is where your map is being displayed again, try here
// to trigger the resize event.
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == 'none'){
document.getElementById(hidemap).style.display = 'block';
}else{
document.getElementById(hidemap).style.display = 'none';
}
}
</script>
回答by Michal
The problem with size of the map is that it needs to know the size of the div that it is rendering to. At the moment you are initializing a map on document load when your div is hidden so the map cannot calculate its size correctly - to solve this problem you simply need to initialize it first time you show the div (not onload).
地图大小的问题在于它需要知道要渲染到的 div 的大小。目前，当您的 div 处于隐藏状态时，您正在文档加载时初始化地图，因此地图无法正确计算其大小 - 要解决此问题，您只需在第一次显示 div 时对其进行初始化（而不是 onload）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#viewmap {
position:relative;
width:944px;
float:left;
display:none;
}
#hidemap {
position:relative;
width:944px;
float:left;
display:block;
}
#map_canvas {
position:relative;
float:left;
width:944px;
height:300px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
//your global map object
var map = null;
function initialize() {
var latlng = new google.maps.LatLng(-27.999673,153.42855);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = 'blah';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == 'block'){
document.getElementById(viewmap).style.display = 'none';
}else{
document.getElementById(viewmap).style.display = 'block';
//check if map object exists (it is created by you initialize function), if not initialize it
if (!map) {
initialize();
}
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == 'none'){
document.getElementById(hidemap).style.display = 'block';
}else{
document.getElementById(hidemap).style.display = 'none';
}
}
</script>
</head>
<body>
<div id="viewmap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a>
<div id="map_canvas"></div>
</div>
<div id="hidemap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
</div>
</body>
</html>
回答by user2559310
Just initialize the map when you want to display it. I had the same problem and solved it this way.
只需在要显示地图时对其进行初始化。我遇到了同样的问题并以这种方式解决了它。
Remove this line:
删除这一行：
google.maps.event.addDomListener(window, 'load', initialize);
And change the toggleDivscript this way:
并以toggleDiv这种方式更改脚本：
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == 'block'){
document.getElementById(viewmap).style.display = 'none';
}else{
document.getElementById(viewmap).style.display = 'block';
initialize();
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == 'none'){
document.getElementById(hidemap).style.display = 'block';
}else{
document.getElementById(hidemap).style.display = 'none';
}
}
回答by Webdesign7 London
.map_container {display:none;}
.map_container {显示：无；}
$('.show_hide').click(function(){
$('.map_container').toggle({
complete:function (){
google.maps.event.trigger(map, 'resize');
},
duration:'slow'
});
})
回答by kaleazy
Pretty simple... by the time you initialize the map all of its outer divs have to already be displayed.
很简单……当你初始化地图时，它的所有外部 div 都必须已经显示出来。
So just initialize the map at the very end:
所以只需在最后初始化地图：
setTimeout(function(){
$mapsOuterDiv.slideToggle(700);
setTimeout(function(){
initializeGoogleMap();
},300);
},300);
回答by testCoder
Also i have found another solution. Sometimes you need to call refresh()on google maps object and map will be forced to resize.
我也找到了另一个解决方案。有时您需要调用refresh()谷歌地图对象，地图将被迫调整大小。
// gmaps - instance of particular map ...
gmaps.refresh()
回答by ifaour
You indeed better using the off-lefttechnique!
Here is my edits:
你确实最好使用偏左技术！
这是我的编辑：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#viewmap {
position:relative;
width:944px;
float:left;
}
#hidemap {
position:relative;
width:944px;
float:left;
}
#map_canvas {
position:relative;
float:left;
width:944px;
height:300px;
}
.good-bye {
position: absolute !important;
left: -10000px !important;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.2&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-27.999673,153.42855);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = 'blah';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(hasClass(document.getElementById(viewmap), 'good-bye'))
removeClass(document.getElementById(viewmap), 'good-bye');
else
addClass(document.getElementById(viewmap), 'good-bye');
return;
}
function toggleDiv2(hidemap){
if(hasClass(document.getElementById(hidemap), 'good-bye'))
removeClass(document.getElementById(hidemap), 'good-bye');
else
addClass(document.getElementById(hidemap), 'good-bye');
return;
}
// http://snipplr.com/view/3561/addclass-removeclass-hasclass/
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
</script>
</head>
<body>
<div id="viewmap" class="good-bye">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap'); return false;">Hide map</a>
<div id="map_canvas"></div>
</div>
<div id="hidemap">
<a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a>
</div>
</body>
</html>
示例链接。
回答by Mario
I've been trying to animate my maps with no luck and finally came up with this:
我一直试图在没有运气的情况下为我的地图制作动画，最后想出了这个：
CSS:We set the map wrapper with position:absolute;and visibility:hidden;because it has to have its normal dimensions to properly render.
CSS：我们使用position:absolute;和设置地图包装器，visibility:hidden;因为它必须具有正常尺寸才能正确渲染。
JavaScript:
JavaScript：
$(document).ready(function()
{
// We then run this function only once per page load. It places out map back in the document flow but hides it before it starts to toggle its height.
$("#mapBtn").one("click", function()
{
$("#myMap").hide();
$("#myMap").css("visibility", "inherit");
$("#myMap").css("position", "relative");
});
// And now we toggle away nicely
$("#mapBtn").click(function()
{
$("#myMap").slideToggle(400);
});
});
回答by Dmitriy
This code work right (using jQuery 1.2.6):
Css: #gog-map{position:absolute; visibility:hidden;}
这段代码工作正常（使用 jQuery 1.2.6）：Css： #gog-map{position:absolute; visibility:hidden;}
$(document).ready(function() {
$('a#link').click(function() {
if ($('#gog-map').is(':visible')){
$('#gog-map').slideUp('slow');
} else{
$('#gog-map').slideDown('slow');
$("#gog-map").css('visibility','inherit');
$("#gog-map").css('position','relative');
}
return false;
});
});
$(document).ready(function() {
$('a#link').click(function() {
if ($('#gog-map').is(':visible')){
$('#gog-map').slideUp('slow');
} else{
$('#gog-map').slideDown('slow');
$("#gog-map").css('visibility','inherit');
$("#gog-map").css('position','relative');
}
return false;
});
});
