地理定位：使用 OpenStreetMap 制图和 POI

Question

地理定位：使用 OpenStreetMap 制图和 POI

Evg*_*nik 5 javascript php mapping geolocation openstreetmap

我正在制作一个网站，访问者在地图上显示其位置，并且在选定的半径（例如 10 公里）内，访问者可以看到一些 POI（例如餐馆、酒吧）。

到目前为止我有这个代码：

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

Run Code Online (Sandbox Code Playgroud)

它使用谷歌地图用标记显示我在地图上的位置。
问题是，我想使用 OpenStreetMap 中的地图（它们会定期更新并且没有限制），但不幸的是我还没有设法实现它。

以下是我需要的地图：地图

1. 是否有示例（教程）显示如何使用他们的 API，例如Google的API ？
2. OpenStreetMap 有类似 POI 的东西，比如Google Places吗？或者甚至可以将 Google Places 与 OpenStreetMap 的地图一起使用？

Answer 1

rob*_*b74 3

如果您想使用 OpenStreetMap 数据，您应该查看OpenLayers。这与 Google 地图或 Bing 地图 API 的工作方式略有不同：您必须在服务器上安装 OpenLayers JavaScript 库，它负责显示可以来自各种来源的地图数据（“地图图块”）：OpenStreetMap (OSM)、Google 地图、您自己的自定义地图数据等。OpenStreetMap网站本身使用 OpenLayers 来显示地图。

1：有文档（尽管恐怕不如 Google Maps API）和大量示例，包括一些单独或与 Google 数据一起使用 OpenStreetMap 数据的示例（在“过滤器”中输入“osm”框在顶部）。

2：对于 POI，您可以在地图上放置一个“标记层” ，如本例所示，包括可自定义的标记图标和点击图标时出现的气泡，但您必须处理 POI 的数据以及您自己的搜索功能。因此，如果您愿意，您可以自由使用 Google Places API，然后将结果显示为 OpenStreetMap 上的标记 - 只要您显示“Powered by Google”徽标即可。

归档时间：	13 年，9 月前
查看次数：	11571 次
最近记录：	12 年，5 月前