Openstreetmap：在网页中embedded地图（如Google地图）

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

我需要使用一些标记在页面内显示地图，并允许拖放/缩放，也许路由。 我怀疑会有一些JavaScript的API，但我似乎无法find它。

search给我一个访问原始地图数据的API ，但是对于地图编辑来说，这似乎更多。 此外，对AJAX来说，这将是一个沉重的任务。

Answer 1

你需要使用一些JavaScript的东西来显示你的地图。 OpenLayers是这个的头号select。

在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

现在还有传单 ，这是build立在移动设备的头脑。

有传单的快速入门指南 。 除了诸如标记之类的基本function之外，它还支持使用外部服务的路由 。

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

Answer 3

我也会看看CloudMade的开发者工具 。 他们提供了一个精美风格的OSM底图服务，一个OpenLayers插件，甚至是他们自己的轻量级，非常快速的JavaScript映射客户端。 他们还主持自己的路由服务，你提到这是一个可能的要求。 他们有很好的文档和例子。

Answer 4

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

Answer 5

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

他们的页面上有一个示例 ，显示如何embeddedOSM切片。

Answer 6

简单的传单示例

眼镜

• 使用OpenStreetMaps。
• 将地图集中到目标GPS。
• 在目标GPS上放置一个标记。

码

// 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="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>