Есть много статей на тему знакомства с 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:
<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.
