显示/隐藏谷歌地图 api 不能正常工作答案

【问题标题】：Show/Hide google maps api does not work fine显示/隐藏谷歌地图 api 不能正常工作
【发布时间】：2018-06-01 13:14:10
【问题描述】：

当我单击此按钮时，我希望更改值。当我这样做时，首先它会更改按钮上的文本，但地图不会出现。之后，我重复这个过程，代码工作正常。

function change() {
  var elem = document.getElementById("myButton1");
  if (elem.value == "Show") elem.value = "Hide";
  else elem.value = "Show";
}



function displayMap() {
  if (document.getElementById('map').style.display == "none") {
    document.getElementById('map').style.display = "block";
    initialize();
  } else {
    document.getElementById('map').style.display = "none";
  }

}

#map {
  display: none;
}

<input onclick='change(), displayMap()' type='button' value='Show' id='myButton1'></input>
<div id="map" style="width:100%; height:300px;">map</div>

【问题讨论】：

尝试初始化然后显示？

标签： javascript html css

【解决方案1】：

全局分配document.getElementById('map').style.display = "none";

请试试下面的代码

    document.getElementById('map').style.display = "none";// this line is the solution 
    function change() {
      var elem = document.getElementById("myButton1");
      if (elem.value == "Show") elem.value = "Hide";
      else elem.value = "Show";           
    }
    function displayMap() {
      if (document.getElementById('map').style.display === "none")       {
        document.getElementById('map').style.display = "block";
       } else {
        document.getElementById('map').style.display = "none";
       }
    }

 #map {
      display: none;
    }

 <input onclick='change(), displayMap()' type='button' value='Show' id='myButton1'></input>
    <div id="map" style="width:100%; height:300px;">map</div>

注意：不要忘记调用从我的 sn-p 中删除的 initialize() 函数

【讨论】：

【解决方案2】：

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

你可以像这样使用Window.getComputedStyle()：

var map = document.getElementById('map'),
  btn = document.getElementById("myButton1");

function change() {
  if (btn.value == "Show") btn.value = "Hide";
  else btn.value = "Show";
}

function displayMap() {

  var style = window.getComputedStyle(map);

  if (style.display == "none") {

    map.style.display = "block";

    initialize();

  } else {

    map.style.display = "none";
    
    console.log('hiding');

  }

}


// Placeholder
function initialize() {
  console.log('showing map');
}

#map {
  display: none;
  width: 100%;
  height: 300px;
  background:#333;
}

<input onclick='change(), displayMap()' type='button' value='Show' id='myButton1' />
<div id="map"></div>

上面的方法很好，但我会使用更一致的方法，例如 CSS 类，我会首先初始化地图，因为您实现的方式耗尽了 initialize()

【讨论】：