Javascript 显示/隐藏谷歌地图api无法正常工作

当我点击这个按钮时，我想改变这个值。当我这样做时，首先它会更改按钮上的文本，但地图不会出现。在那之后，我重复这个过程，代码运行良好

函数更改（）{
var elem=document.getElementById（“myButton1”）；
如果（elem.value==“Show”）elem.value=“Hide”；
else elem.value=“Show”；
}
函数displayMap（）{
if（document.getElementById（'map'）.style.display==“无”）{
document.getElementById（'map'）.style.display=“block”；
初始化（）；
}否则{
document.getElementById（'map'）.style.display=“无”；
}
}

#地图{
显示：无；
}

地图

分配

document.getElementById（'map'）.style.display=“无”全局

请尝试下面的代码


document.getElementById（'map'）.style.display=“无”//这条线就是解决方案
函数更改（）{
var elem=document.getElementById（“myButton1”）；
如果（elem.value==“Show”）elem.value=“Hide”；
else elem.value=“Show”；
}
函数displayMap（）{
if（document.getElementById（'map'）.style.display==“无”）{
document.getElementById（'map'）.style.display=“block”；
}否则{
document.getElementById（'map'）.style.display=“无”；
}
}

#地图{
显示：无；
}

map
HTMLElement.style
返回内联样式（在
style
属性中列出的内容）

您可以像这样使用
Window.getComputedStyle（）
：


var map=document.getElementById（'map'），
btn=document.getElementById（“myButton1”）；
函数更改（）{
如果（btn.value==“Show”）btn.value=“Hide”；
else btn.value=“显示”；
}
函数displayMap（）{
var style=window.getComputedStyle（映射）；
如果（style.display==“无”）{
map.style.display=“block”；
初始化（）；
}否则{
map.style.display=“无”；
log（“隐藏”）；
}
}
//占位符
函数初始化（）{
console.log（“显示地图”）；
}
#地图{
显示：无；
宽度：100%；
高度：300px；
背景：#333；
}
是否尝试初始化然后显示？