我开始学习 OpenStreetMap/OpenLayers API 以将 map 放入我的网络应用程序中。虽然我必须掌握映射本身，但我发现包含 map 的 div 不会留在我放置它的位置。到目前为止，这是我的代码:
map 测试.htm
<html>
<head>
<title>OpenStreetMap Test</title>
<script language="JavaScript" src="/resources/OpenLayers-2.13.1/OpenLayers.js"></script>
<script language="JavaScript" src="/resources/proj4js/lib/proj4js-combined.js"></script>
<script language="JavaScript" src="maptest.js"></script>
</head>
<body onload="init()">
<h2>OpenStreetMap Test</h2>
<div id="map" style="border: 1px solid black; margin-left: auto; margin-right: auto; margin-top: 10%; height: 300px; width:300px;"></div>
</body>
</html>
map 测试.js
function init() {
Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs ";
var EPSG27700 = new OpenLayers.Projection("EPSG:27700");
var EPSG900913 = new OpenLayers.Projection("EPSG:900913");
var map = new OpenLayers.Map("map",{
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher({'ascending':false}),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.KeyboardDefaults()
]});
var OSM = new OpenLayers.Layer.OSM("OpenStreetMap");
var OSMcycle = new OpenLayers.Layer.OSM("OSM Cycle", ['http://a.tile.thunderforest.com/cycle/${z}/${x}/${y}.png',
'http://b.tile.thunderforest.com/cycle/${z}/${x}/${y}.png',
'http://c.tile.thunderforest.com/cycle/${z}/${x}/${y}.png']);
map.addLayers([OSMcycle,OSM]);
var position = new OpenLayers.LonLat(321550,507250).transform(EPSG27700,EPSG900913);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
var zoom = 13;
map.setCenter(position,zoom);
}
如果没有 onload="init()"，div 位于页面中央，水平方向，距离顶部不远。但是，调用 init() 后，div 会迅速回到左侧，就在标题下方。它仍然有正确的大小和边框，所以 CSS 样式没有被完全忽略，但我不明白为什么它没有保持原样？我试过将 CSS 放入样式表而不是内联，结果发生了同样的事情。
最佳答案
OpenLayers 附带一个包含以下 CSS 的默认样式表
div.olMap {
margin: 0 !important;
}
这将覆盖您的内联 css margin-right: auto、margin-left: auto 和 margin-top: 10%。
您可以通过将您喜欢的样式应用于外部样式表(或内部样式表)中的 #map 选择器来解决此问题。
#map {
margin-left: auto !important;
margin-right: auto !important;
margin-top: 10% !important;
}
这是有效的，因为您对 ID 选择器 #map 的引用比类选择器 .olMap 具有更高的优先级。
关于css - OpenStreetMap 覆盖 map div 位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23278296/