代码之家 › 专栏 › 技术社区 › waanders

如何在div中显示OpenStreetMap地图?

openstreetmap css html

waanders · 技术社区 · 6 年前

如何在(较小的)div中显示OpenStreetMap地图?

<html><body>
  <div id="mapdiv" width="500" height="300"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    var lonLat = new OpenLayers.LonLat(3.45, 51.5)
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );

    var zoom=13;

    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

    markers.addMarker(new OpenLayers.Marker(lonLat));

    map.setCenter (lonLat, zoom);
  </script>
</body></html>

但是地图在网页上显示得很满。

1 回复 | 直到 6 年前

Franz 6 年前

尝试使用:

<div id="mapdiv" style="width:500px; height:300px;"></div>

推荐文章

Attico · 是否可以根据traffic\u calming标签限制路线?

6 年前

GSheil · OSMbonuspack从路由查找节点ID

7 年前

Carlos Ulbricht · 如何在天桥Turbo中实现无ND标签的全速通行

7 年前

Romain · 缺少OSMnx边几何体属性

7 年前

PJ1992 · 列xxx缺少数据

7 年前

www · 如何将Thunderforest API密钥传递给GGR空间包以创建地图

7 年前

Cláudio Ribeiro · Javascript地理位置未找到位置信息

7 年前

Miguel Herreros Cejas · EC2具有开放层3的开放街道地图服务器

7 年前

Himagaran · 在自定义OSM映射中的标记顶部添加弹出窗口/代码段/标题

7 年前

Ayser · 使用python 3使用PyQt4 QWebView查看地图

7 年前