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);

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

眼镜

使用OpenStreetMaps.
将地图居中到目标GPS.
在目标GPS上放置标记.

注意:

我在这里使用了Leaflet的CDN版本,但您可以下载这些文件,以便您可以在自己的主机上提供服务.

@ 0x48piraj请创建一个[jsfiddle]（http://jsfiddle.net）来演示此问题，或者甚至更好：请使用您的代码提出一个新问题，以显示出什么问题。 (2认同)

Answer 4

kru*_*ubo 9

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

Run Code Online (Sandbox Code Playgroud)

如果您想做更详细的事情，请参阅 OSM wiki“部署您自己的 Slippy Map ”。