logo标签列表

地理定位：使用OpenStreetMap进行地图绘制和POI标记

javascriptgeolocationmappingopenstreetmap
7

我正在制作一个网站，在该网站上，访问者的位置将显示在地图上，并且在选定的半径（例如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>

它会使用Google Maps在地图上显示带标记的我的位置。但是，我想使用OpenStreetMap的地图（它们定期更新且没有限制），但不幸的是我尚未成功实现。这是我需要的地图：Maps。

1. 是否有示例（教程）展示如何使用他们的API，类似于Google的？
2. OpenStreetMap是否有像Google Places那样的POI？或者可以将Google Places与OpenStreetMap的地图一起使用吗？
2个回答
3
如果您想使用OpenStreetMap数据，可以考虑使用OpenLayers。这与Google Maps或Bing Maps API有点不同：您需要在服务器上安装OpenLayers JavaScript库，它会处理显示地图数据（“地图瓦片”），这些数据可以来自各种来源：OpenStreetMap（OSM）、Google Maps、自定义地图数据等。OpenStreetMap网站本身使用OpenLayers来显示地图。
1：有 文档（尽管可能不如Google Maps API的文档好），还有许多示例，包括一些使用OpenStreetMap数据的示例，可以单独使用或与Google数据一起使用（在顶部的“过滤”框中输入“osm”）。
2：至于POI，您可以在地图上放置一个“标记层”，就像这个例子一样，包括可自定义的标记图标和气泡，在单击标记时出现，但是您必须自己负责POI的数据和搜索功能。因此，如果您想要，可以自由使用Google Places API，然后将结果显示为OpenStreetMap上的标记 - 只要您显示“由Google提供支持 ”徽标即可。
除非您的应用程序产生足够的收入来支付谷歌地图服务，否则我不会投资时间开发任何使用谷歌技术的东西。 - tony gil
1
不允许在OSM地图上显示Google Places：“如果您的应用程序在地图上显示Places API数据，则该地图必须由Google提供。”（https://developers.google.com/places/policies） - Arthur Dent
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接