SolveItproblems

SolveITProblems is a project of QFormat.net intellectual club

SolveITProblems это проект интеллектуального клуба QFormat.net

пятница, 30 сентября 2011 г.

Выделение областей на картах Google

Всем привет! Задание такое: добавить на web-страничку google maps с возможностью выделения каких либо участков (в виде многоугольников) на этой же карте.
Ну что ж, перейдем к делу.
Подключаем к странице библиотеку "Google Maps API" -
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" ></script>.
Пишем функцию инициализации карты -
function initialize_map( ) {
var latlng = new google.maps.LatLng(40.394934,49.87381);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
return map;
}

Создаем объект latlng класса google.maps.LatLng, в конструктор, которого передаем значения географической широты и долготы соответственно.
Массив myOptions будет хранить параметры карты. Элемент с ключом zoom - число которое будет значением уровня приближения (масштаба); center - координаты центра отображаемой карты, должен быть объектом класса google.maps.LatLng; mapTypeId - тип карты, значение берем одним из методов HYBRID, ROADMAP, SATELLITE, TERRAIN класса google.maps.MapTypeId.
Создаем объект map класса google.maps.Map. Здесь в конструкторе document.getElementById("map_canvas") есть выборка элемента, в который будет загружаться карта, а myOptions есть массив параметров карты.
Далее в теге body пишем атрибут, который собственно будет выполнять функцию инициализации карты при загрузке страницы - <body onload="initialize_map( );">.
На странице прописываем "дивку", для которой мы создавали карту - <div id="map_canvas" style="width: 800px; height: 600px;"></div>.
Ну вот первая часть работы окончена. Пока на нашей странице есть dragable google maps.
А теперь дополним наш скрипт. Для этого в функцию initialize_map( ) добавляем следующее ( до return map;) -
var polygonCoords = [
new google.maps.LatLng(40.386566,49.846687),
new google.maps.LatLng(40.418201,49.846687),
new google.maps.LatLng(40.386566,49.887886),
new google.maps.LatLng(40.386566,49.846687)
];
var polygon = new google.maps.Polygon({
path: polygonCoords,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "#FFFF00",
fillOpacity: 0.5
});
polygon.setMap(map);
Элементы массива var polygonCoords есть точки вершин многоугольника, где координаты первой и последней точки должны совпадать, дабы замкнуть эту ломанную.
Создаем объект polygon класса google.maps.Polygon, в конструктор передаем массив, где каждый ключ отвечает за следующее :
path - массив точек( вершин многоугольника),
strokeColor - цвет границы выделенной области,
strokeOpacity - интенсивность цвета границы ( от 0 до 1),
strokeWeight - толщина границы,
fillColor - цвет заливки области,
fillOpacity - интенсивность цвета заливки(от 0 до 1).
И в конце концов применяем созданный многоугольник к карте - polygon.setMap(map).
Полную документацию по Google Maps API v3 можете прочитать тут -> http://code.google.com/intl/ru-RU/apis/maps/documentation/javascript/reference.html

Комментариев нет:

Отправить комментарий