Question

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

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

搜索给我一个API for access to raw map data，但这似乎更适合地图编辑;此外，使用它对AJAX来说是一项繁重的任务。

Answer 1

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

Answer 2

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

传单有Quick Start Guide。除了基本功能，如标记，插件，它还使用外部服务支持routing。

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

Answer 3

简单的OSM Slippy Map Demo / Example

点击“运行代码段”，查看嵌入的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.0.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

功能

使用OpenStreetMaps。
将地图置于目标GPS中心。
在目标GPS上放置标记。

注意：

我在这里使用了Leaflet的CDN版本，但您可以download这些文件，以便您可以提供服务并将其包含在您自己的主机中。

Answer 4

看看mapstraction。这可以让您更灵活地提供基于谷歌，osm，雅虎等的地图，但您的代码不必更改。

Answer 5

我还要看一下CloudMade's developer tools。它们提供了一个风格优美的OSM基础地图服务，一个OpenLayers插件，甚至是他们自己的轻量级，非常快速的JavaScript映射客户端。它们还托管自己的路由服务，您可以将其作为可能的要求。他们有很好的文档和示例。

Answer 6

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

他们的网页上有example，显示了如何嵌入OSM磁贴。

Answer 7

如果您只想在网页上嵌入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“ Deploying your own Slippy Map”。

Answer 8

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

这将是一个补充，直到我使用人口普查局的掩护TIGER行文件找出我的Python Java混合脚本为止。

Answer 9

使用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>

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

9 个答案:

简单的OSM Slippy Map Demo / Example

代码

功能