打开街道地图：在网页中嵌入地图（如 Google 地图）

StackOverflow https://stackoverflow.com/questions/925164

题

有没有办法在您的页面中嵌入/混搭 OpenStreetMap（就像这样 谷歌地图 API 作品）？

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

搜索让我 用于访问原始地图数据的 API, ，但这似乎更多是为了地图编辑；此外，对于 AJAX 来说，使用它是一项艰巨的任务。

有帮助吗？

解决方案

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

其他提示

有现在还传单，这是建立在考虑移动设备。

有一个快速入门指南的传单。除了基本的功能，如标记物，与插件它也支持路由使用外部的服务。

有关一个简单的地图，这是更复杂的用途IMHO更容易和更快设置比的OpenLayers，但完全配置的，并且tweakable。

简单的 OSM Slippy Map 演示/示例

单击“运行代码片段”即可查看带有标记的嵌入式 OpenStreetMap 滑动地图。这是用创建的 传单.

代码

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

眼镜

  • 使用 OpenStreetMap。
  • 将地图以目标 GPS 为中心。
  • 在目标 GPS 上放置标记。

笔记：

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

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

我也想看看 CloudMade的开发者工具。他们提供了一个精美的风格OSM底图服务，插件的OpenLayers，甚至自己的重量轻，非常快速的JavaScript地图客户端。他们还举办你作为一个可能的要求提到自己的路由服务。他们有很大的文档和示例。

可以使用的OpenLayers（JS API为地图）。

这里有一个示例示出如何嵌入OSM其网页上的瓦片。

如果您只是想在网页上嵌入 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".

有很简单的方法来做到这一点，如果你担心的Javascript ...我还在学习。开街做一个简单的WordPress插件，你可以自定义。添加OSM的Widget插件。

这将是一个填充，直到我用从人口普查局coverter TIGER线文件弄清楚我的Python的Java concotion。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top