开放街道地图覆盖了地图div位置

Question

开放街道地图覆盖了地图div位置

4

我开始学习OpenStreetMap / OpenLayers API，在我的Web应用程序中放置地图。虽然我已经掌握了地图本身，但我发现包含地图的div不会停留在我放置它的位置。以下是我的代码：

maptest.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>

maptest.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 放入样式表中而不是内联，结果仍然相同。

- Iain

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sfletche · Accepted Answer

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。

这里有一个可行解决方案的jsfiddle示例。