109

有没有办法在您的页面中嵌入/混搭 OpenStreetMap（就像Google Maps API的工作方式一样）？

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

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

4

9 回答 9

79

你需要使用一些 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

于 2009-05-29T09:33:46.420 回答
39

现在还有Leaflet，它是为移动设备构建的。

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

对于一个简单的地图，恕我直言，它比 OpenLayers 更容易和更快地设置，但完全可配置和调整以适应更复杂的用途。

于 2014-04-28T07:19:56.010 回答
36

简单的 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 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>

眼镜

  • 使用 OpenStreetMaps。
  • 使地图以目标 GPS 为中心。
  • 在目标 GPS 上放置一个标记。
  • 仅使用 Leaflet 作为依赖项。

笔记：

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

于 2017-01-19T23:25:10.580 回答
7

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

  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 “部署你自己的 Slippy Map ”。

于 2018-11-28T23:07:48.740 回答
6

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

于 2009-06-18T22:20:55.730 回答
5

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

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

编辑：OpenLayers 示例的新链接

于 2009-05-29T09:30:29.607 回答
5

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

于 2009-06-10T14:02:48.153 回答
0

如果你害怕 Javascript，有一个简单的方法可以做到这一点……我还在学习。Open Street 制作了一个简单的 Wordpress 插件，您可以对其进行自定义。添加 OSM 小部件插件。

这将是一个填充物，直到我使用人口普查局的隐蔽 TIGER 行文件找出我的 Python Java 组合。

于 2018-09-09T16:21:14.967 回答
0

使用Leaflet，就这么简单（运行代码）：

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>

于 2021-07-12T21:07:46.750 回答