Javascript Openstreetmap：在网页中嵌入地图（如谷歌地图）

有没有一种方法可以将OpenStreetMap嵌入/混搭到您的页面中（就像这样）

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

搜索给了我一个机会，但这似乎更适合于地图编辑；此外，对于AJAX来说，使用它将是一项繁重的任务。

您可以使用OpenLayers（用于地图的JSAPI）

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

---

编辑：新建

您需要使用一些JavaScript来显示地图。OpenLayers是这方面的首选

在上有一个例子，在上有一些更高级的东西

及

---

我还要看一看。他们提供了风格优美的OSM基本地图服务、OpenLayers插件，甚至他们自己的轻量级、非常快速的JavaScript映射客户端。它们还拥有自己的路由服务，这是您提到的一个可能的需求。他们有很好的文档和示例。

看看。这可以让您更灵活地提供基于google、osm、yahoo等的地图，但是您的代码不必更改。

现在还有一个，它是基于移动设备构建的

有一份传单。除了标记等基本功能外，它还支持使用外部服务和插件

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

simple OSM Slippy map Demo/Example 单击“RunCodeSnippet”以查看带有标记的嵌入式OpenStreetMap slippy地图。这是使用创建的

代码

//要渲染贴图的位置。
var元素=document.getElementById（'osm-map'）；
//必须设置高度。您也可以在CSS中执行此操作。
element.style='高度：300px；'；
//在地图元素上创建传单地图。
var map=L.map（元素）；
//将OSM平铺层添加到传单地图。
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
//目标的GPS坐标。
var目标=L.latLng（'47.50737'，'19.04611'）；
//使用zoom 14将地图中心设置为目标。
地图。设置视图（目标，14）；
//在同一位置放置一个标记。
标记（目标）。添加到（地图）
如果你害怕Javascript，有一种简单的方法可以做到……我还在学习。OpenStreet制作了一个简单的Wordpress插件，您可以自定义它。添加OSM小部件插件

在我使用人口普查局的coverter TIGER line文件找出我的Python Java配方之前，这将是一个填充。如果您只想在网页上嵌入OSM地图，最简单的方法是直接从OSM网站获取iframe代码：

导航到所需的地图
在右侧，单击“共享”图标，然后单击“HTML”
将生成的iframe代码直接复制到您的网页中。应该是这样的：



这就是我要找的，非常感谢。但我只能接受一个答案，所以它会转到更详细的答案。链接已断开。他们的网站似乎已关闭。它可以工作，但没有“www”子域：……正是我搜索的，谢谢！mapstraction现在已经有将近10年没有维护了：）我在javascript函数中使用了您的代码，它工作起来很有魅力。但是，再次触发该功能，会放大osm地图并破坏一切。有什么解决方案吗？@0x48piraj请创建一个示例来演示这个问题，或者更好：用你的代码提出一个新问题，说明问题出在哪里。这很漂亮。谢谢！不过有一个问题：在
var target=L.latLng（）
中，您清楚地定义了坐标。有没有机会展示如何实现几个点的坐标存储在JSON结构中的情况？谢谢仅用于地图中心所在的视图。使用
L.marker（target）.addTo（map）添加标记只需循环您的结构，创建所需数量的
L.latLng（）
s，并将它们传递给
L.marker（）
。我，我比JS更担心Wordpress，但这是一个意见问题。谢谢：）顺便说一句，老虎是我们唯一的。