我对html,css,javascript和传单非常陌生.
我尝试创建一个具有多个选项卡的html文件,并且在每个选项卡上我都希望显示一张不同的地图(左侧),其中包含有关该地图所显示内容的信息(右侧).
我发现this链接有关如何执行选项卡部分,并且我在地图部分上已有一个有效的示例,但是html文件上只有一个地图.
现在,我尝试将这两件事结合起来,但是只有一个地图可以正常工作(第一个),其他地图仅显示灰色,左上角可能只有一小块地图.但是,即使我尝试平移“破碎”的地图,也只会显示部分图块.
有人可以给我提示如何做吗？甚至可以在带有传单的html文件上包含多个地图吗？
到目前为止,这是我的html文件,包括html,css和javascript.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<style>
/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
height: 100%;
margin: 0;
font-family: sans-serif;
}
/* Style tab links */
.tablink {
background-color: #9f9f9f;
color: black;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 5px;
font-size: 16px;
width: 33.33%;
}
.tablink:hover {
background-color: #7f7f7f;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: black;
background-color: white;
display: none;
padding: 15px 5px;
height: 95%;
}
.map {
float: left;
width: 34.8%;
height: 100%;
border-radius: 5px 5px 0px 0px;
border-width: 1px;
border-style: dotted;
border-color: #000000;
}
</style>
</head>
<body>
<button class="tablink" onclick="openPage('Europe', this)" id="defaultOpen">Europe</button>
<button class="tablink" onclick="openPage('Asia', this)">Asia</button>
<button class="tablink" onclick="openPage('Africa', this)">Africa</button>
<div id="Europe" class="tabcontent">
<div id="mapEurope" class="map"></div>
</div>
<div id="Asia" class="tabcontent">
<div id="mapAsia" class="map"></div>
</div>
<div id="Africa" class="tabcontent">
<div id="mapAfrica" class="map"></div>
</div>
<script>
function openPage(pageName, elmnt) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
// Show the specific tab content
document.getElementById(pageName).style.display = "block";
// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = "#ffffff";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
//Create maps
var centerLatEurope = 55.0;
var centerLngEurope = 18.0;
var initialZoomEurope = 4;
var mapEurope = L.map('mapEurope', {
center: [centerLatEurope, centerLngEurope],
zoom: initialZoomEurope
});
//set one map tiles source
googleStreetsEurope = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
attribution: '<a href="https://www.google.com/maps">Google Maps</a>',
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});
googleStreetsEurope.addTo(mapEurope);
var centerLatAsia = 49.0;
var centerLngAsia = 88.0;
var initialZoomAsia = 2;
var mapAsia = L.map('mapAsia', {
center: [centerLatAsia, centerLngAsia],
zoom: initialZoomAsia
});
//set one map tiles source
googleStreetsAsia = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
attribution: '<a href="https://www.google.com/maps">Google Maps</a>',
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});
googleStreetsAsia.addTo(mapAsia);
var centerLatAfrica = 0.0;
var centerLngAfrica = 18.0;
var initialZoomAfrica = 4;
var mapAfrica = L.map('mapAfrica', {
center: [centerLatAfrica, centerLngAfrica],
zoom: initialZoomAfrica
});
//set one map tiles source
googleStreetsAfrica = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
attribution: '<a href="https://www.google.com/maps">Google Maps</a>',
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});
googleStreetsAfrica.addTo(mapAfrica);
</script>
</body>
</html>
我知道我可以使用数组使用较少的变量来绘制地图,但是现在我只对使这些多个地图起作用感兴趣.我稍后会关心代码的美观性.
解决方法:
有解决方法可以使地图的invalidateSize无效.您可以在更改标签时添加适当的方法：
function openPage(pageName, elmnt) {
...
setTimeout(function(){
mapAsia.invalidateSize();
mapAfrica.invalidateSize();
}, 0);
}
使用此setTimeout,您的地图将在每次更改选项卡后刷新,当然,您可以更明智地仅根据单击的选项卡而不是所有选项卡刷新所需的地图.
更新小提琴：https://jsfiddle.net/kev7m4d3/1/
请记住,这是一种解决方法,可能还有另一种解决方案.
invalidateSize( animate) – Checks if the map container size
changed and updates the map if so — call it after you’ve changed the
map size dynamically, also animating pan by default.
隐藏使用制表符映射时无法正确计算自己的大小可能是需要此依据的,另一种解决方案可能是例如单击适当的制表符后初始化映射,并且每次在制表符和映射表的适当空间可见时都会初始化每个映射.