Openstreetmap：将地图嵌入网页（例如Google Maps）

95

有没有办法将OpenStreetMap嵌入/混搭到您的页面中（例如Google Maps API的工作方式）？

我需要在页面内显示带有一些标记的地图，并允许在屏幕上拖动/缩放（可能是路由）。我怀疑会为此使用一些Javascript API，但我似乎找不到它。

搜索为我提供了访问原始地图数据的API，但这似乎更多用于地图编辑。此外，与之合作对于AJAX来说将是一项繁重的任务。

— 皮斯克沃离开大楼
source

71

您需要使用一些JavaScript资料来显示地图。OpenLayers是为此的第一选择。

在http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example中有一个示例，在以下位置有更高级的示例

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

和

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

— 拉哈内
source

32

现在还有Leaflet，它是考虑到移动设备而构建的。

有一份传单快速入门指南。除了标记之类的基本功能外，它还通过插件支持使用外部服务进行路由。

对于简单的地图，IMHO的设置比OpenLayers更容易，更快捷，但可以针对更复杂的用途进行完全配置和调整。

— Piskvor
source

25

简单的OSM Slippy Map演示/示例

单击“运行代码段”以查看带有标记的嵌入式OpenStreetMap滑动地图。这是使用Leaflet创建的。

码

// 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 leayer 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>

展开摘要

眼镜

使用OpenStreetMaps。
将地图居中放置到目标GPS。
在目标GPS上放置一个标记。
仅将Leaflet用作依赖项。

注意：

我在这里使用了CDN版本的Leaflet，但是您可以下载文件，以便可以从自己的主机提供并包含它们。

— Totymedli
source

我在javascript函数中使用了您的代码，它的工作原理就像一个魅力。但是同样，触发该功能，扩大osm映射并破坏一切。有什么办法吗？

— 0x48piraj

2

@ 0x48piraj请创建一个jsfiddle来演示该问题，甚至更好：用您的代码提出一个新问题，以显示出什么问题。

— totymedli

这很漂亮。非常感谢！但是，有一个问题：var target = L.latLng()您可以清楚地定义坐标。有机会展示如何实现将多个点的坐标存储在JSON结构中的情况吗？谢谢！

— 卢卡斯·艾玛瑞托

1

仅用于地图中心所在的视图。您可以使用L.marker(target).addTo(map);Just循环结构添加标记，并L.latLng()根据需要创建任意多个s并将其传递给L.marker()。

— totymedli

6

看一看mapstraction。这样可以为您提供更大的灵活性，以提供基于google，osm，yahoo等的地图，但是您的代码无需更改。

— 艾伦
source

他们的网站似乎已关闭。

— maddrag0n 2012年

1

它可以工作，但仅不包含“ www”子域：mapstraction.com ..正是我搜索的内容，谢谢！

— 大卫

mapstraction已有近10年没有维护了：）

— Julian F. Weinert

5

我还将看一下CloudMade的开发人员工具。他们提供风格精美的OSM基本地图服务，OpenLayers插件，甚至提供自己的轻量级，非常快速的JavaScript映射客户端。它们还托管自己的路由服务，您提到了这是一项可能的要求。他们有很好的文档和示例。

— 鹿角
source

4

您可以使用OpenLayers（地图的js API）。

他们的页面上有一个示例，显示了如何嵌入OSM磁贴。

编辑：OpenLayers示例的新链接

— iu
source

这就是我想要的，非常感谢。我只能接受一个答案，因此转到更详细的答案。

— Piskvor

3

链接已死。

— totymedli

2

如果您只想在网页上嵌入OSM映射，最简单的方法是直接从OSM网站获取iframe代码：

在https://www.openstreetmap.org上导航至所需的地图
在右侧，单击“共享”图标，然后单击“ HTML”
将生成的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“ 部署自己的Slippy Map ”。

— 克鲁博
source

0

如果您担心使用Javascript，有一种简单的方法...我还在学习。Open Street提供了一个可以自定义的简单Wordpress插件。添加OSM Widget插件。

在我使用人口普查局的TIGER行文件掩盖我的Python Java混合之前，这将是一个补充。

— 戴维·斯潘
source

我，我比JS更担心Wordpress，但这是一个见解。谢谢您：)

— Piskvor在

顺便说一句老虎是仅限美国。

— Piskvor在