OpenStreetMap :如何创建网站访问者可以添加地点的地图？
OpenStreetMap（OSM）是一个开放源代码的协作项目，允许任何人编辑和添加地理信息。如果你想创建一个网站，让访问者可以添加地点到地图上，你可以使用OSM的工具和API来实现。以下是一个基本的步骤指南：
1. 注册OpenStreetMap账号
首先，你需要在OpenStreetMap官网注册一个账号。
2. 获取API密钥（可选）
虽然OSM的基本编辑功能不需要API密钥，但如果你想使用更高级的功能，可能需要注册一个API密钥。
3. 创建网站
你可以使用任何你熟悉的网站开发框架来创建你的网站。以下是一个简单的示例，使用HTML和JavaScript来嵌入OSM地图。
HTML部分
<!DOCTYPE html>
<html>
<head>
<title>OpenStreetMap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<style>
#map {
height: 600px;
}
</style>
</head>
<body>
<h1>OpenStreetMap Example</h1>
<div id="map"></div>
<script>
// JavaScript部分
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 添加一个标记
var marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("<b>Hello World!</b>
I am a popup.").openPopup();
</script>
</body>
</html>4. 添加编辑功能
为了让访问者能够添加地点，你可以使用OSM的编辑工具，如iD编辑器。你可以通过嵌入iD编辑器到你的网站来实现这一点。
使用iD编辑器
<!DOCTYPE html>
<html>
<head>
<title>OpenStreetMap iD Editor Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<link rel="stylesheet" href="https://unpkg.com/id-editor@2.19.5/build/css/id-editor.css" />
<script src="https://unpkg.com/id-editor@2.19.5/build/js/id-editor.js"></script>
<style>
#map {
height: 600px;
}
</style>
</head>
<body>
<h1>OpenStreetMap iD Editor Example</h1>
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var editor = new iD.EditingTool(map, {
data: 'https://www.openstreetmap.org/api/0.6/map?bbox=' + map.getBounds().toBBoxString()
});
</script>
</body>
</html>5. 处理用户提交的数据
当用户通过iD编辑器添加或修改地点时，你需要处理这些数据。你可以通过OSM的API将更改提交到OSM数据库。
提交更改
你可以使用OSM的Overpass API或直接调用OSM的编辑API来提交更改。以下是一个简单的示例，使用Fetch API提交更改：
function submitChanges(changeset) {
fetch('https://www.openstreetmap.org/api/0.6/changeset/create', {
method: 'POST',
headers: {
'Content-Type': 'application/xml',
'Authorization': 'Basic ' + btoa('username:password') // 使用你的OSM用户名和密码
},
body: changeset
})
.then(response => response.text())
.then(data => {
console.log('Changeset created:', data);
})
.catch(error => {
console.error('Error creating changeset:', error);
});
}注意事项
- 权限和安全性：确保你的网站和API调用符合OSM的使用条款和安全要求。
- 用户体验：提供一个友好的用户界面，让用户可以轻松地添加和编辑地点。
- 数据验证：在提交更改之前，验证用户输入的数据，以确保数据的准确性和完整性。
通过以上步骤，你可以创建一个网站，让访问者可以添加地点到OpenStreetMap上。
相关·内容
我真的不是很熟悉OSM，但我想创建一个世界地图的小网站，我的网站的访问者可以简单地添加一个描述的地方。我不知道该从何说起。有没有像Wordpress这样的CMS预编码模板，或者只是非CMS模板？
浏览 7提问于2016-08-07得票数 1
回答已采纳
2回答
我正在制作一个网站，访问者可以在地图上显示自己的位置，在选定的半径内(例如10公里)，访问者可以看到一些POI(例如餐馆、酒吧)。<!div id="map_canvas" style="width:100%; height:100%"></div></html>
它使用Googl
浏览 2提问于2012-03-01得票数 5
回答已采纳
1回答
我正在尝试在我工作的公司内部设置一个自定义地图，但我在做这件事时遇到了一些麻烦。
我不希望人们必须使用Google帐户或任何东西登录，我想将此嵌入到我们服务器上的自己的页面上。我已经将地图设置为私有，当然，地图不会显示--有没有办法让我在保持地图私有的同时仍然嵌入它？我猜我需要用Google Maps API来做这件事，但到目前为止，我一直在努力寻找一个教程或任何能提供答案的东西。到目前为止，我使用了一个简单的iFrame，如下所示：
浏览 3提问于2014-04-09得票数 0
我正在创建一个iPhone旅行应用，既可以使用在线地图，也可以使用离线地图。对于离线地图，我希望允许用户下载他们感兴趣的区域的mbtiles文件(例如伦敦)。地图上应该有道路等信息。已在OpenStreetmap中找到的。我知道像这样的网站可以下载Openstreetmap摘要。创建Openstreet
浏览 0提问于2012-07-30得票数 5
我已经在"openstreetmap“上创建了一个帐户。其次，我需要获取所有地点或位置添加到我使用我的帐户在OSM上使用API。
有没有API可以做到这一点？
浏览 3提问于2015-06-02得票数 0
我目前正在做一个项目，我们正在使用Google显示一些数据，方法是使用客户端JS在用户单击按钮后手动将点添加到地图上。
有人建议，使用谷歌地图可能会泄露我们的数据给谷歌，我想了解的可能性。谷歌有办法获得地图上的所有点吗？
浏览 0提问于2014-11-17得票数 6
回答已采纳
我需要显示一个国家的地区边界加上地区的主要城市。稍后，我想根据我的应用程序(原生C++)计算出的一些值对区域进行着色。感谢您的时间和经验，
Petr
浏览 1提问于2012-11-30得票数 1
回答已采纳
我深入到世界的OpenStreetMap，传单和地图瓷砖！那么，像这样的一方是如何做到的呢？当我检查他们的网站，我
浏览 3提问于2020-03-28得票数 2
回答已采纳
有人知道如何在Compact Framework应用程序中使用OpenStreetMap吗？有没有框架或者类似的东西？我在他们的wiki中所能找到的就是如何为他们的项目做出贡献，以及如何使用他们的软件来绘制数据。但我想使用他们的地图在我自己的应用程序中显示用户的位置。我找不到任何关于使用他们的web服务或任何我必须用来在我的应用程序中显示他们<e
浏览 2提问于2009-05-28得票数 5
1回答
所以这是我的问题。我计划为我的学院提供一张本地化的地图，展示所有的地点，如主楼、科技园等。我不仅计划开发GUI，而且还想运行自己的算法，比如从一个块找到最快的路径到另一个块(注意:该算法是我将要编写的，因为我不想将最短的路由作为最快的，而是希望添加自己的参数作为权重)。我想在本地托管地图(比如在内部系统上)，并且应该能够满足实时请求(显示到最近的
浏览 4提问于2013-01-11得票数 1
回答已采纳
对于我在生物信息学方面所做的工作，我熟悉python的编码。我最近被要求做一种不同类型的分析--分析数据，然后将数据叠加在美国地图上。我认为，在编写python代码进行数据分析之后，我需要使用javascript，但我不熟悉创建图像。将我的python数据分析与生成动态映像的代码相结合的最佳方法是什么？
谢谢你的帮助。
浏览 3提问于2016-01-28得票数 0
回答已采纳
我用传单和Openstreetmap (使用官方网站：)创建了vuejs地图， url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
浏览 6提问于2022-03-03得票数 0
1回答
在我的Drupal 8网站上，我用一张使用开放街道地图数据的传单卡片创建了页面。当我转到google搜索控制台时，它会告诉我，下面的链接被封锁了“资源被封锁的页面”：https://c.tile.openstreetmap.frhttps://b.tile.openstreetmap.fr
我该怎么办？
浏览 0提问于2019-01-18得票数 0
回答已采纳
0回答
我的网站目前使用mapbox作为底图: www.livehazards.com我听说OSM是免费的，x的浏览量是免费的，对吗？
我知道底图会有所不同，但我能像mapbox一样导入GeoJson地震数据并设置数据(圆形边框、圆形动画)的样式吗？如何开始在我的
浏览 8提问于2017-12-07得票数 1
1回答
我尝试用OpenStreetMap数据添加Carto创建的层：‘正电子’。我有OpenLayers3，我在CartoDB：网站的网页上找到了代码var cartodb_positron = new ol.layer.Tile/copyright">OpenStreetMap</a> contributors, &c
浏览 1提问于2015-01-23得票数 0
回答已采纳
我有一个网站，将谷歌的位置信息与用户，并显示在地图上的信息。例如，用户可以搜索一个地点(当前使用的是Places Library Autocomplete API)，并为该地点添加书签以供以后检索。根据Google Maps TOS，我只将地点ID及其引用存储在我的数据库中，并在需要在地图上显示每个地点的坐标信息时发出客户端请求。我的</
浏览 1提问于2012-06-06得票数 0
只要您信任OpenStreetMap及其贡献者，您就可以自由地复制、分发、传输和修改我们的数据。如果您更改或基于我们的数据，您可以分发的结果，只有在同一许可证。完整的法律法规解释了你的权利和责任。
这是写在主OpenStreetMap网站上的内容。但我对此有点困惑。我想创建我自己的地图(我自己的设计，并在地图</e
浏览 2提问于2015-07-16得票数 0
回答已采纳
我在一个开放的地图项目上工作，并试图创建一个地图，使网站访问者可以添加一些信息输入字段的地图标记(标记将被所有批准后可见)。我发现OpenLayers和Leaflet似乎都很有前途，并花了一些时间组装，但经过大量搜索，我无法找到任何允许访问者为这两个工具制作的地图添加新标记的东西。有没有人知道这是否可能~~或者是否有其他开源工具
浏览 2提问于2018-03-11得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
