javascript 地理定位：使用 OpenStreetMap 绘制地图和 POI
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9503505/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Geolocation: Mapping and POI with OpenStreetMap
提问by Evgeni Reznik
I'm making a website, where the visitor gets its position showed on a map and within a chosen radius (e.g. 10km) the visitor can see some POIs (e.g. Restaurants, Bars).
我正在制作一个网站，访问者在地图上显示其位置，并且在选定的半径（例如 10 公里）内，访问者可以看到一些 POI（例如餐厅、酒吧）。
I have this code so far:
到目前为止我有这个代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=[MY_KEY]&sensor=false">
</script>
<script type="text/javascript">
function init()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (processPosition, handleError);
}
else
{
alert("Geolocation not supported in this browser");
}
}
function processPosition(pos)
{
var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var myOptions = {
center: latlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here! (at least within a "+pos.coords.accuracy+" meter radius)"
});
}
function handleError(err)
{
alert('An error occurred: ' + err.code);
}
</script>
</head>
<body onload="init()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
It shows me my position on a map with a marker using Google Maps.
The thing is, I would like to use the maps from OpenStreetMap (they are updated regularly and there are not restrictions), but unfortunately I haven't managed to implement it yet.
Here are the maps I need: Maps
1. Is there an example (tutorial), which shows how to use their API, like Google's?
2. Does OpenStreetMap has something like POIs, like Google Places? Or is it even possible to use Google Places together with the maps of OpenStreetMap?
它使用谷歌地图用标记显示我在地图上的位置。
问题是，我想使用 OpenStreetMap 中的地图（它们会定期更新并且没有限制），但不幸的是我还没有设法实现它。
这是我需要的地图：地图
1. 是否有一个示例（教程），说明如何使用他们的 API，例如Google的？
2. OpenStreetMap 有类似 POI 的东西，比如Google Places吗？或者甚至可以将 Google Places 与 OpenStreetMap 的地图一起使用？
采纳答案by rob74
If you want to use OpenStreetMap data, you should look into OpenLayers. This works a little bit differently than the Google Maps or Bing Maps APIs: you have to install the OpenLayers JavaScript library on your server, and it takes care of displaying the map data ("map tiles") which can come from various sources: OpenStreetMap (OSM), Google Maps, your own custom map data, etc. The OpenStreetMap websiteitself uses OpenLayers to display the maps.
如果您想使用 OpenStreetMap 数据，您应该查看OpenLayers。这与 Google Maps 或 Bing Maps API 的工作方式略有不同：您必须在服务器上安装 OpenLayers JavaScript 库，它负责显示来自各种来源的地图数据（“地图图块”）：OpenStreetMap (OSM)、Google Maps、您自己的自定义地图数据等。OpenStreetMap 网站本身使用 OpenLayers 来显示地图。
1: There is documentation(although I'm afraid not quite as good as for the Google Maps API) and plenty of examples, including some for using OpenStreetMap data, alone or together with Google data (enter "osm" in the "filter" box at the top).
1：有文档（虽然恐怕不如 Google Maps API 好）和大量示例，包括一些用于单独或与 Google 数据一起使用 OpenStreetMap 数据的示例（在“过滤器”中输入“osm”）框在顶部）。
2: As for POIs, you can place a "Marker Layer"on the map as in this example, including customizable marker icons and bubbles which appear when clicking on the icons, but you'll have to take care of the data for the POIs and the search functions yourself. So, if you want, you are free to use the Google Places API and then display the results as markers on an OpenStreetMap - as long as you displaya "Powered by Google" logo.
2：至于兴趣点，你可以像这个例子一样在地图上放置一个“标记层”，包括可自定义的标记图标和点击图标时出现的气泡，但你必须照顾好兴趣点的数据和搜索功能自己。因此，如果您愿意，您可以自由使用 Google Places API，然后将结果显示为 OpenStreetMap 上的标记——只要您显示“由 Google 提供支持”的标志。
回答by nickl-
The list of all OSM frameworks available from openstreetmap.org, with particular notice on the list of so called "webmaps", as it pertains to your question: http://wiki.openstreetmap.org/wiki/Frameworks#Webmaps
openstreetmap.org 提供的所有 OSM 框架列表，特别注意所谓的“网络地图”列表，因为它与您的问题有关：http://wiki.openstreetmap.org/wiki/Frameworks#Webmaps
nJoy!
快乐！
