gpt4 book ai didi

html - 带有工具栏的 OpenLayers Map 显示不正确

转载 作者:太空宇宙 更新时间:2023-11-03 18:38:10 25 4
gpt4 key购买 nike

我正在尝试创建一个简单的基于 OpenLayers 的 map ,在屏幕顶部有一个工具栏。我希望工具栏和 map 以每个元素周围的边距/边框为中心,并且没有滚动条。我最终会向工具栏添加按钮,但首先我想确定布局。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- <link rel="stylesheet" href="style.css" /> -->

<script type="text/javascript" src="http://openlayers.org/api/2.12/OpenLayers.js"></script>

<style>
html, body {
height: 100%;
width: 100%
margin: 0;
background-color: black;
}

#toolbar {
border: solid 1px #999;
background-color: #ccc;
margin: 10px;
width: 100%;
height: 3%;
border-radius: 6px;
}

#map {
border: solid 1px #999;
background-color: #ccc;
margin: 10px;
width: 100%;
height: 95%;

}

</style>

<script type="text/javascript">
function init() {
var map = new OpenLayers.Map("map");
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
map.zoomToMaxExtent();
}

</script>

</head>
<body onload="init()">
<div id="toolbar"></div>
<div id="map"></div>
</body>
</html>

最佳答案

这是更正后的 jsfiddle来自评论。我刚刚将 css 修改为:

 html, body {
height: 96%;
background-color: black;
}

#toolbar {
border: solid 1px #999;
background-color: #ccc;
margin-bottom: 10px;
width: 100%;
height: 3%;
border-radius: 6px;
}

#map {
border: solid 1px #999;
background-color: #ccc;
margin-bottom: 10px;
width: 100%;
height: 100%;
}

关于html - 带有工具栏的 OpenLayers Map 显示不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18233939/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com