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

Есть много статей на тему знакомства с Google Map Api и Yandex Map Api, но про остальные картографические сервисы не так много практического материала. В недавнем времени работал с Api:

Google map
Yandex map
Yahoo map
Bing map
OpenStreet map

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

С Google map ситуация проще всего: практического материала много, мой пример выглядит следующим образом:
Html page:

<span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"http://maps.google.com/maps/api/js?sensor=false"</span> &gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span> 
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"@Url.Content("</span>~/<span class="attribute">Scripts</span>/<span class="attribute">jquery-1.5.1.min.js</span>")" <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"@Url.Content("</span>~/<span class="attribute">Scripts</span>/<span class="attribute">LoadGoogle.js</span>")"  <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">h2</span>&gt;</span>GoogleMap<span class="tag">&lt;/<span class="title">h2</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"map"</span> <span class="attribute">style</span>=<span class="value">"width: 1400px; height: 500px;"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>

<h2>GoogleMap</h2>

Script:

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

$(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:

<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"http://api-maps.yandex.ru/1.1/index.xml?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"@Url.Content("</span>~/<span class="attribute">Scripts</span>/<span class="attribute">jquery-1.5.1.min.js</span>")" <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"@Url.Content("</span>~/<span class="attribute">Scripts</span>/<span class="attribute">LoadYandex.js</span>")"  <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">h2</span>&gt;</span>YandexMap<span class="tag">&lt;/<span class="title">h2</span>&gt;</span>
 <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"YMapsID"</span> <span class="attribute">class</span>=<span class="value">"YMaps YMaps-cursor-grab"</span> <span class="attribute">style</span>=<span class="value">"width: 1400px; height: 500px;"</span>&gt;</span>
 <span class="tag">&lt;/<span class="title">div</span>&gt;</span>

<h2>YandexMap</h2>

</div>

Script:

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

$(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:

<span class="tag">&lt;<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"http://api.maps.yahoo.com/ajaxymap?v=3.8&amp;appid=appidhere"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"@Url.Content("</span>~/<span class="attribute">Scripts</span>/<span class="attribute">LoadYahoo.js</span>")"  <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">body</span> <span class="attribute">onload</span>=<span class="value">"initialize_ymap()"</span>&gt;</span>
    <span class="tag">&lt;<span class="title">h2</span>&gt;</span>YahooMap<span class="tag">&lt;/<span class="title">h2</span>&gt;</span>
    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"ymap"</span> <span class="attribute">style</span>=<span class="value">"width: 1400px;height: 500px;"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">body</span>&gt;</span>

<h2>YahooMap</h2>

</body>

Script:

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

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:

<span class="tag">&lt;<span class="title">script</span> <span class="attribute">charset</span>=<span class="value">"UTF-8"</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">charset</span>=<span class="value">"UTF-8"</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span> <span class="attribute">src</span>=<span class="value">"https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;s=1"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"@Url.Content("</span>~/<span class="attribute">Scripts</span>/<span class="attribute">LoadBing.js</span>")"  <span class="attribute">type</span>=<span class="value">"text/javascript"</span>&gt;</span><span class="tag">&lt;/<span class="title">script</span>&gt;</span>
<span class="tag">&lt;<span class="title">body</span> <span class="attribute">onload</span>=<span class="value">"GetMap();"</span>&gt;</span>
<span class="tag">&lt;<span class="title">h2</span>&gt;</span>BingMap<span class="tag">&lt;/<span class="title">h2</span>&gt;</span>
<span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">'mapDiv'</span> <span class="attribute">style</span>=<span class="value">"position:absolute; width:1400px; height:500px;"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
<span class="tag">&lt;/<span class="title">body</span>&gt;</span>

<h2>BingMap</h2>

</body>

Script:

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

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:

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

<h2>OpenStreetMap</h2>

</body>

Script:

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

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.

Источник: http://habrahabr.ru/post/131249/

https://corp2.info/razrabotka-i-sozdanie-sajtov-internet-magazinov-veb-proektov-kiev-1038.html

К2® Cloud ERP Info

K2, Python, PHP, Linux

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

Be the first to comment

Leave a Reply Скасувати відповідь