Question

如果我在页面上有三个选项卡，并且第二页上的openlayer地图默认不是最新的。单击第二个选项卡时，地图图块不会加载。仅在我调整Web文档窗口大小时才会加载地图图块。这种情况发生在所有浏览器上。以下是供您参考的代码。 jsfiddle link

$all_options = wp_load_alloptions();
$my_options  = array();

foreach ( $all_options as $name => $value ) {
    var_dump($name);
    var_dump($value);
}

Answer 1

我正在使用的代码库的问题是，在加载页面时会调用创建新地图，所以如果我尝试使用类似的东西创建新地图

onclick="openCity(event, 'Paris'), init()"

这是另外创建一个map div容器。

我可以使用

解决问题

map.updateSize();

但是我在onClick事件上异步调用它

setTimeout(function() { Compass.map.updateSize(); }, 0);

Answer 2

主要问题是因为图片在页面上不可见时无法加载。这就是背景没有显示的原因。

我遇到这个问题的所有时间我都改变了我的JS来解决这个问题。

这是JsFindle不是最好的解决方案，但它会起作用。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<style>
.map {
        height: 400px;
        width: 100%;
      }
body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 20px;
}

.topright:hover {color: red;}
</style>
</head>
<body>

<p>Click on the x button in the top right corner to close the current tab:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris'); newMap('Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
  <div id="map" class="map"></div>
</div>

<div id="Tokyo" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js" type="text/javascript"></script>
<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
var maps = {};
function newMap(name){

        if(!maps[name]){

    maps[name] = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });

    }


}      
</script>

</body>
</html>

这些是我改变的部分。

  <button class="tablinks" onclick="openCity(event, 'Paris'); newMap('Paris')">Paris</button>

var maps = {};
function newMap(name){

        if(!maps[name]){

    maps[name] = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });

    }

}

Answer 3

您可以在openCity()功能中添加它，它会起作用：

if(cityName == 'Paris') {
    map.updateSize();
}

工作小提琴：https://jsfiddle.net/rLa0bk2d/1/

Answer 4

希望这有效

在选项卡的onclick事件上添加函数init，如下所示

   <button class="tablinks" onclick="openCity(event, 'Paris'), init()">Paris</button>

然后在js代码上创建函数init并将地图放在其中

  function init() {
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({


        center: ol.proj.fromLonLat([37.41, 8.82]),
        zoom: 4
      })
    });
  }

https://jsfiddle.net/4cm8eqvn/2/

Openlayers瓷砖未加载在标签页上

4 个答案: