文章/答案/技术大牛

发布

社区首页 >问答首页 >OpenStreetMap覆盖地图div位置

问OpenStreetMap覆盖地图div位置
EN

Stack Overflow用户

提问于 2014-04-24 19:39:01

回答 1查看 1.7K关注 0票数 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放在样式表中而不是内联中，同样的事情也发生了。

css

openlayers

openstreetmap

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-30 03:37:00

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‘ID选择器#map的引用比类编辑选择器.olMap具有更高的优先级。

这是一个工作解决方案中的一个小问题。。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23278296

复制

相似问题

问OpenStreetMap覆盖地图div位置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问OpenStreetMap覆盖地图div位置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问OpenStreetMap覆盖地图div位置
EN