Примеры работы с разными map API


Есть много статей на тему знакомства с Google Map Api и Yandex Map Api, но про остальные картографические сервисы не так много практического материала. В недавнем времени работал с Api:
  1. Google map
  2. Yandex map
  3. Yahoo map
  4. Bing map
  5. OpenStreet map

И хотел обобщить работу с вышеупомянутыми сервисами, а именно инициализация карты и установление маркеров по клику мышки. Материалы в статье представлены в виде Html кода, javascript и результата — скриншота, а так же исходники на vs 2010 MVC3.

С Google map ситуация проще всего: практического материала много, мой пример выглядит следующим образом:
Html page:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/LoadGoogle.js")"  type="text/javascript"></script>
<h2>GoogleMap</h2>
<div id="map" style="width: 1400px; height: 500px;"></div>


Script:
$(document).ready(function () {
 initialize();
});
//инициализация карты в div "map"
function initialize() {
    var haightAshbury = new google.maps.LatLng(51.0532, 31.83);//(долгота, широта)
    var mapOptions = {
        zoom: 12,//масштаб
        center: haightAshbury,//позиционируем карту на заданые координаты
        mapTypeId: google.maps.MapTypeId.TERRAIN//задаем тип карты
    };    
    map = new google.maps.Map(document.getElementById("map"), mapOptions);//инициализация карты
 
    google.maps.event.addListener(map, 'click', function (event) {
        addMarker(event.latLng);
    });//добавляем событие нажание мышки
}
//функция добавления маркера
function addMarker(location) {
 
    var shadow = new google.maps.MarkerImage('/Images/roles.png',    
    new google.maps.Size(37, 32),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 32)); // Теневое изображение
 
    var image = new google.maps.MarkerImage('/Images/smilies.png',
      new google.maps.Size(20, 32),
      new google.maps.Point(0, 0),
      new google.maps.Point(0, 32)); //изображение маркера
 
    marker = new google.maps.Marker({
        position: location,
        map: map,
        shadow: shadow,
        icon: image,
        title: "My title!)",
        zIndex: 999
    });//добавление маркера

В результате получим карту Google c возможностью добавлять маркеры:



Для инициализации Yandex map вам понадобится ключ доступа к сервису и следующий пример:
Html page:
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/LoadYandex.js")"  type="text/javascript"></script>
<h2>YandexMap</h2>
 <div id="YMapsID" class="YMaps YMaps-cursor-grab" style="width: 1400px; height: 500px;">
 </div>


Script:

$(document).ready(function () {
 initialize();
});
function initialize() {
    map = new YMaps.Map(document.getElementById("YMapsID"));//инициализация карты
    map.setCenter(new YMaps.GeoPoint(31.87, 51.0532)//(широта, долгота)
                    , 12    //Масштаб
                    , YMaps.MapType.MAP);//тип карты
 
    map.addControl(new YMaps.TypeControl());//смена типа карты
    map.addControl(new YMaps.ToolBar());//инструменты
    map.addControl(new YMaps.Zoom());//смена масштаба
    map.addControl(new YMaps.MiniMap());//Небольшая отображающая местоположение
    map.addControl(new YMaps.ScaleLine());//Отображение масштаба
 
    YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
        addMarker(mEvent.getGeoPoint());
    });// событие щелчка мыши на карте
}
//функция добавления маркера 
function addMarker(location) {    
    var geoPlacemark = new YMaps.Placemark(new YMaps.GeoPoint(location.__lng, location.__lat), { draggable: 1 });
    //координаты добавления метки
    geoPlacemark.name = "Название чего то";
    geoPlacemark.description = "описание чего то";
    map.addOverlay(geoPlacemark);//добавление метки 
}

В результате получим карту Yandex c возможностью добавлять маркеры:



Обратите внимание на координаты, в Google идет сначала долгота, потом широта, а в Yandex наоборот!

Пример работы с Yahoo map api:
Html page:
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=appidhere"></script>
<script src="@Url.Content("~/Scripts/LoadYahoo.js")"  type="text/javascript"></script>
<body onload="initialize_ymap()">
    <h2>YahooMap</h2>
    <div id="ymap" style="width: 1400px;height: 500px;"></div>
</body>


Script:
function initialize_ymap() {
 
    var yPoint = new YGeoPoint(51.0532, 31.83);//(долгота, широта)
 
    var map = new YMap(document.getElementById('ymap'));//инициализация карты
 
    map.setMapType(YAHOO_MAP_SAT);//тип карты
 
    map.drawZoomAndCenter(yPoint, 6);//масштаб
 
    map.addTypeControl();//добавление контроля типа
 
    YEvent.Capture(map, EventsList.MouseClick, reportPosition);  //событие нажатия на карте
        //функция добавления маркера
        function reportPosition(_e, _c){  
            var mapmapCoordCenter = map.convertLatLonXY(map.getCenterLatLon()); //переобразование координат  
            var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon );  //Точка куда нужно поставить маркер
            map.addMarker(currentGeoPoint); //Добавление маркера
        }   
}

В результате получим карту Yahoo c возможностью добавлять маркеры:



Для работы с Bing map api нужно взять ключ:
www.microsoft.com/maps/developers/web.aspx
Пример работы с Bing map api:
Html page:
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
<script src="@Url.Content("~/Scripts/LoadBing.js")"  type="text/javascript"></script>
<body onload="GetMap();">
<h2>BingMap</h2>
<div id='mapDiv' style="position:absolute; width:1400px; height:500px;"></div>
</body>


Script:
function GetMap() {
    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "ххххххххxxxxxxxxxxxxxxxxx",//ключ
        center: new Microsoft.Maps.Location(51.0532, 31.83),//(долгота,широта)
        mapTypeId: Microsoft.Maps.MapTypeId.road,//(тип карты)
        zoom: 8//масштаб
    });
    //Событие на кликание мышки на карте
    Microsoft.Maps.Events.addHandler(map, 'click', displayLatLong);
    function displayLatLong(e) {
        if (e.targetType == "map") {
            var point = new Microsoft.Maps.Point(e.getX(), e.getY());//координаты вставки маркера
            var loc = e.target.tryPixelToLocation(point);//позиция маркера
            var pin = new Microsoft.Maps.Pushpin(loc);//маркер
            map.entities.push(pin);//вставляем маркер
        }
    }
}


В результате получим карту Bing c возможностью добавлять маркеры:



Пример работы с OpenStreet map api:

Html page:
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 <script src="@Url.Content("~/Scripts/LoadOpenStreet.js")"  type="text/javascript"></script>
 
 <body onload="GetMap();">
    <h2>OpenStreetMap</h2>
    <div id="OSMap" style="position:absolute; width:1400px; height:500px;"></div>
 </body>


Script:
function GetMap() {
    map = new OpenLayers.Map("OSMap");//инициализация карты
    var mapnik = new OpenLayers.Layer.OSM();//создание слоя карты
    map.addLayer(mapnik);//добавление слоя
    map.setCenter(new OpenLayers.LonLat(31.83, 51.0532) //(широта, долгота)
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // переобразование в WGS 1984
            new OpenLayers.Projection("EPSG:900913") // переобразование проекции
          ), 10 // масштаб
        );
    var layerMarkers = new OpenLayers.Layer.Markers("Markers");//создаем новый слой маркеров
    map.addLayer(layerMarkers);//добавляем этот слой к карте
    map.events.register('click', map, function (e) {    
        var size = new OpenLayers.Size(21, 25);//размер картинки для маркера
        var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h); //смещение картинки для маркера
        var icon = new OpenLayers.Icon('/Images/smilies.png', size, offset);//картинка для маркера
        layerMarkers.addMarker(//добавляем маркер к слою маркеров
            new OpenLayers.Marker(map.getLonLatFromViewPortPx(e.xy), //координаты вставки маркера
            icon));//иконка маркера
    }); //добавление событие клика по карте
}

В результате получим карту OpenStreet c возможностью добавлять маркеры:



Вот такие интересные примеры работы с картами, думаю кому то будут полезны.

Исходники на VS2010 MVC3.
Share post

Comments 22

    +10
    Кстати, а никто еще не догадался написать прослойку, которая позволяла бы менять под собой различные api карт без изменения кода?
      0
      Я на каких-то сайтах видел, как люди, используя Google Maps API, подгружали тайлы из других источников. На wikimapia.org/ так и сделано, похоже.
        0
        Я года три назад когда еще в гугле небыло Украины — а только серая область, а на Яндексе небыло АПИ для встраивания на свои веб-сайты, написал скрипт который рисовал поверх карт гугла карты Яндекса :) И работало!

        Сейчас меня более интересует как с помощью карт рисовать круизные маршруты красивые, а не просто соединять точки отрезками.
        +2
        Насколько я знаю, то каждый такой велосипед бережно выпиливает индивидуально под самого себя.
          0
          Пользовался такой года 2 назад, сейчас найти не могу. Прикольно, но практического смысла мало и функциональность очень сильно ограничена просто потому, что практически все сверх «показать карту, поставить маркер» в разных API делается сильно по-разному.
            0
            2ГИС тайлы в ГуглоАПИ даже быстрее работают.
              0
              Реквестирую Кащея в коменты! Он писал такое. Например, у нас на работе так (ссылка в профиле, вроде как не принято публиковать в комментариях).
                0
                Когда вышла АПИ яндекс карт я решил быстренько добавить их себе на сайт.
                По результатам получилось что скрестить Gv2 и Яндекс карты очень просто, кода где-то на 50 строк прямого изменения базовых классов обоих АПИ. Самое сложное в координатах.
                Сейчас, уже давно, есть апи которое нормальное работает с обоими АПИ без каких либо шаманств.
                Весь секрет в обертках над АПИ, и мосту между этими обертками и конечными обьектами которые размещаются на картах.
                И конечно нет никаких «родных» плейсмарков.
                Например G, Y, Overlay, front, ну и сам последний пример
                А ссылке в профиле технаря наверное пора немного обновиться, а то за полтора года я там таааакие баги поправил… :)
                0
                в примерах же используется openlayers.org/ — который умеет или может суметь все возможные апи.

                + www.mapstraction.com/
                +2
                Не используйте, пожалуйста, ipicture… Ни одна из картинок не грузится. Если не сложно, залейте на habrastorage.
                  +1
                  исправился…
                    +1
                    Благодарю!
                  0
                  В результате получим карту Bing c возможностью добавлять маркеры:<.blockquote>
                  стоит яндекс карта

                  В результате получим карту OpenStreet c возможностью добавлять маркеры:<.blockquote>
                  стоит бинг
                    +1
                    Прошу прощения. /me говорит себе который раз о кнопке «предпросмотр»
                    В результате получим карту Bing c возможностью добавлять маркеры:

                    стоит яндекс карта

                    В результате получим карту OpenStreet c возможностью добавлять маркеры:

                    стоит бинг
                    0
                    Спасибо за замечание, после пере заливания картинок на habrastorage немного напутал, теперь все норм
                      0
                      Рассматриваю вариант работы с Google Maps из Silverlight'а. Никто случайно не сталкивался с подобным?
                        0
                        Мы в Pinpoint используем одновременно 2 типа карт — Google и Яндекс. Хотим добавить и Bing. Для таких целей у нас есть специальное подобие инрерфейса на JS, который можно реализовать для разных видов карт.
                          0
                          Спасибо, попробовал гуглокарты.
                          В разделе Script забыли добавить

                          $(document).ready(function () {
                          initialize();
                          });


                          и ссылка на LoadGoogle.js — лишняя
                            0
                            Ссылка не лишняя, ибо реализация скрипта находится именно по этой ссылке, а не на страничке… смотрите исходники.
                              +1
                              Больше года назад сделал нечто подобное — mmaps.net, только там 9 карт и возможность синхронного просмотра двух карт одновременно.
                                0
                                И ко всем картам доступ осуществляется через API?
                                  0
                                  Да, все карты с родным АПИ.

                              Only users with full accounts can post comments. Log in, please.