php – 地理定位：使用OpenStreetMap进行映射和POI

发布时间：2020-12-13 16:43:44 所属栏目：PHP教程来源：网络整理

导读：我正在建立一个网站,访问者在地图上显示其位置,并在选定的半径(例如10公里)内,访问者可以看到一些POI(例如餐馆,酒吧). 到目前为止我有这个代码： !DOCTYPE htmlhtml head meta name="viewport" content="initial-scale=1.0,user-scalable=no" / style type="

我正在建立一个网站,访问者在地图上显示其位置,并在选定的半径(例如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中的地图(它们会定期更新,没有限制),但不幸的是我还没有设法实现它.
这是我需要的地图：Maps
1.是否有一个示例(教程),它显示了如何使用他们的API,如Google的？
2. OpenStreetMap是否有类似POI的东西,比如Google Places？或者甚至可以将Google Places与OpenStreetMap的地图一起使用？

解决方法

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

1：有documentation(虽然我恐怕不如谷歌地图API那么好)和大量的examples,包括一些使用OpenStreetMap数据,单独或与谷歌数据一起使用(在“过滤器”中输入“osm”)顶部的方框).

2：对于POI,你可以像在this example一样在地图上放置一个“Marker Layer”,包括点击图标时出现的可自定义的标记图标和气泡,但你必须处理POI和搜索功能的数据你自己.因此,如果您愿意,您可以自由使用Google Places API,然后在OpenStreetMap上将结果显示为标记 – 只要您使用display“Powered by Google”徽标即可.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!