Openstreetmap:在网页中嵌入地图(如Google Maps)
有没有一种方法可以在页面中嵌入/混搭OpenStreetMap (类似于Google Maps API的工作方式)？
我需要在我的页面内显示一个带有一些标记的地图，并允许拖动/缩放，可能是路由。我怀疑会有一些Javascript API来做这件事，但我似乎找不到它。
搜索会给我一个API for access to raw map data，但这似乎更适合地图编辑；此外，使用它对AJAX来说是一项繁重的任务。
回答 9
Stack Overflow用户
发布于 2009-05-29 09:33:46
您需要使用一些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
Stack Overflow用户
发布于 2014-04-28 15:19:56
现在还有Leaflet，它是为移动设备而设计的。
有一个单张的Quick Start Guide。除了标记等基本功能外，它还通过插件支持使用外部服务的routing。
对于一个简单的地图，它比OpenLayers更容易、更快地设置，但对于更复杂的用途，它是完全可配置和可调整的。
Stack Overflow用户
发布于 2017-01-20 07:25:11
简单的OSM Slippy地图演示/示例
点击"Run code snippet“查看一个带有标记的嵌入式OpenStreetMap slippy地图。这是用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: '© <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.
- Centers将地图连接到目标全球定位系统。
- 在目标全球定位系统上放置一个标记。
- 仅将Leaflet用作依赖项。
备注：
我在这里使用的是Leaflet的CDN版本，但是您可以download这些文件，这样您就可以从您自己的主机上提供并包含它们。
https://stackoverflow.com/questions/925164
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号