地理定位:使用OpenStreetMap进行地图绘制和POI

Geolocation: Mapping and POI with OpenStreetMap

本文关键字：地图 绘制 POI OpenStreetMap 定位 使用      更新时间：2023-09-26

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

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

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

1.有没有一个例子（教程），说明如何使用他们的API，就像谷歌的
2.OpenStreetMap有类似POI的东西吗，比如Google Places？或者可以将Google Places与OpenStreetMap的地图一起使用吗？

如果你想使用OpenStreetMap数据，你应该研究OpenLayers。这与谷歌地图或必应地图API的工作方式略有不同：你必须在服务器上安装OpenLayers JavaScript库，它负责显示地图数据（"地图瓦片"），这些数据可以来自各种来源：OpenStreetMap（OSM）、谷歌地图、你自己的自定义地图数据等。OpenStreetMap网站本身使用OpenLayers来显示地图。

1：有文档（尽管我担心不如谷歌地图API好）和大量的例子，包括一些单独使用OpenStreetMap数据或与谷歌数据一起使用的例子（在顶部的"过滤器"框中输入"osm"）。

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

openstreetmap.org上提供的所有OSM框架的列表，特别注意所谓的"网络地图"列表，因为它与您的问题有关：http://wiki.openstreetmap.org/wiki/Frameworks#Webmaps

nJoy！

相关文章：