Геолокация: картирование и POI с 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>

Он показывает мне мою позицию на карте маркером с помощью Google Maps.
Дело в том, что я хотел бы использовать карты из OpenStreetMap (они регулярно обновляются и ограничений нет), но, к сожалению, у меня нет удалось реализовать.

Вот карты, которые мне нужны: Карты

1. Есть ли пример (руководство), показывающий, как использовать их API, например Google?
2. Есть ли в OpenStreetMap что-то вроде POI, например Google Адреса? Или вообще можно использовать Google Places вместе с картами OpenStreetMap?


person Evgenij Reznik    schedule 29.02.2012    source источник


Ответы (2)


Если вы хотите использовать данные OpenStreetMap, вам следует изучить OpenLayers. Это работает немного иначе, чем API Google Maps или Bing Maps: вам нужно установить библиотеку JavaScript OpenLayers на свой сервер, и она позаботится об отображении данных карты («фрагменты карты»), которые могут поступать из разных источников: OpenStreetMap (OSM), Карты Google, ваши собственные картографические данные и т. д. Сам веб-сайт OpenStreetMap использует OpenLayers для отображения карты.

1: Существует документация (хотя, боюсь, не так хорошо, как для Google Maps API) и множество примеров, в том числе некоторые для использования данных OpenStreetMap отдельно или вместе с данными Google (введите "osm " в поле "фильтр" вверху).

2: Что касается POI, вы можете разместить "Marker Layer" на карта, как в этом примере, включая настраиваемые значки маркеров и всплывающие пузырьки при нажатии на значки, но вам придется самостоятельно позаботиться о данных для POI и функциях поиска. Таким образом, если вы хотите, вы можете использовать Google Places API, а затем отображать результаты в виде маркеров на карте OpenStreetMap, если вы отображать логотип "Powered by Google".

person rob74    schedule 06.03.2012
comment
я бы не стал тратить время на разработку чего-либо с использованием технологии Google, ЕСЛИ ваше приложение не будет приносить достаточный доход, чтобы ПЛАТИТЬ за картографические услуги Google. - person tony gil; 10.07.2012
comment
Не разрешается отображать Google Places на карте OSM: если ваше приложение отображает данные Places API на карте, эта карта должна быть предоставлена ​​Google. (developers.google.com/places/policies) - person Arthur Dent; 13.12.2012

Список всех фреймворков OSM, доступных на сайте openstreetmap.org, с особым вниманием к списку так называемых «веб-карт», относящихся к вашему вопросу: http://wiki.openstreetmap.org/wiki/Frameworks#Веб-карты

нРадость!

person nickl-    schedule 14.06.2013