Openstreetmap: embedding map in webpage (like Google Maps)

有没有一种方法可以将 OpenStreetMap 嵌入/mashup 到您的页面中(就像 谷歌地图 API的工作方式一样) ？

我需要在页面中显示带有一些标记的地图，并允许拖动/缩放，也许路由。 我怀疑会有一些 Javascript API 来解决这个问题，但是我似乎找不到它。

搜索给了我一个 用于访问原始地图数据的 API，但似乎更多的是用于地图编辑; 此外，处理这个对于 AJAX 来说将是一项繁重的任务。

176690 次浏览
小开

您可以使用 OpenLayers (用于映射的 jsAPI)。

在他们的页面上有一个 例子展示了如何嵌入 OSM 瓷砖。

编辑: 新 链接到 OpenLayers 示例

小开
最佳答案

You need to use some JavaScript stuff to show your map. OpenLayers is the number one choice for this.

在 http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example有一个例子，在

http://wiki.openstreetmap.org/wiki/OpenLayers_Marker

还有

http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

小开

我还想看看 CloudMade 的开发工具。他们提供了一个美观风格的 OSM 基础地图服务，一个 OpenLayers 插件，甚至他们自己的轻量级，非常快的 JavaScript 地图客户端。它们还承载自己的路由服务，这是您提到的一个可能的需求。他们有很好的文档和示例。

小开

看看 绘画。这可以给你更多的灵活性，提供基于谷歌，osm，雅虎等地图，但你的代码不会改变。

小开

现在还有 传单，它是以移动设备为基础构建的。

There is a 快速入门指南 for leaflet. Besides basic features such as markers, with plugins it also supports routing using an external service.

对于一个简单的映射，它比 OpenLayers 更容易、更快地进行设置，但是对于更复杂的用途，它是完全可配置和可调整的。

小开

简单的 OSM 滑动地图演示/示例

点击“运行代码片段”可以看到一个嵌入的带有标记的 OpenStreetMap 滑动地图。这是用 传单创建的。

密码

// Where you want to render the map.
var element = document.getElementById('osm-map');


// Height has to be set. You can do this in CSS too.
element.style = 'height:300px;';


// Create Leaflet map on map element.
var map = L.map(element);


// Add OSM tile layer to the Leaflet map.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


// Target's GPS coordinates.
var target = L.latLng('47.50737', '19.04611');


// Set map's center to target with zoom 14.
map.setView(target, 14);


// Place a marker on the same location.
L.marker(target).addTo(map);
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

眼镜

  • Uses OpenStreetMaps.
  • Centers the map to the target GPS.
  • 在目标 GPS 上做个标记。
  • 只使用传单作为依赖项。

注:

我使用的 CDN 版本的 传单在这里，但你可以 下载的文件，所以你可以服务和包括他们从你自己的主机。

小开

如果你害怕 Javascript，有一个简单的方法... ... 我还在学习。Open Street 制作了一个简单的 WordPress 插件，你可以自定义。添加 OSM Widget 插件。

这将是一个填充物，直到我使用人口普查局的转换器 TIGER 行文件弄清楚我的 PythonJava 混合物。

小开

If you just want to embed an OSM map on a webpage, the easiest way is to get the iframe code directly from the OSM website:

  1. 导航到 https://www.openstreetmap.org上所需的地图
  2. 在右边，点击“共享”图标，然后点击“ HTML”
  3. 将生成的 iframe 代码直接复制到你的网页中，它应该是这样的:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&amp;layer=mapnik"
style="border: 1px solid black"></iframe>
<br/><small><a href="https://www.openstreetmap.org/#map=12/17.0759/-61.8260">View Larger Map</a></small>

如果您想做一些更详细的工作，请参阅 OSM wiki“ 部署您自己的滑动地图”。

小开

使用 传单，就这么简单(运行代码) :

var mymap = L.map('mapid').setView([51.505, -0.09], 13)


// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ subdomains: ['a', 'b', 'c'] })
.addTo(mymap)
#mapid { height: 280px; }
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
   

<div id="mapid"></div>

小开

对于任何仍然在这里磕磕绊绊的人来说，现在有一些工具不需要你是一个开发人员，它们和 Google My Maps 一样容易使用，但是比它们通用得多，比如 FacilMap和 地图。

Just add some markers and then fetch your embeddable iframe, which can be set to be interactive as well :)


提交答案