KorniloFF-ScriptS ©

Здравствуйте, Гость!
Page
Menu

Яндекс-карты

В этой статье мы рассмотрим пример установки динамической Яндекс-карты на свой сайт с использованием библиотеки api-maps.yandex.

Как всегда, я ввел небольшие усовершенствования, выражающиеся в возможности по клику на поле карты определить точные географические координаты точки клика. На мой взгляд это очень удобно. Данную опцию можно использовать хотя бы для того, чтобы ввести координаты искомой точки в GPS-навигатор.

Также я постарался в комментариях к коду максимально расшифровать значения всех вводимых параметров.

Чего у меня не получилось - так это добиться динамического изменения свойства balloonContentBody. Поэтому большая просьба:

если у кого-то это получилось, отпишитесь в комментариях и, по возможности, укажите способ менять содержание balloon скриптом.

Итак, приступим к анализу кода примера.

HTML-часть

Первым делом нужно подключить библиотеку с Яндекс-API. За это отвечает строка . Подобное подключение гарантирует подгрузку броузером свежайшей минорной версии беблиотеки 2.1.Х.

Стилями CSS описываем правила, на которых я не буду подробно останавливаться, поскольку для себя вы их все равно будете менять практически полностью.

Далее, в разметке сайта нужно определить блок для размещения Яндекс-карты. В моем первом примере он выглядит как

. Идентификатор блока должен быть уникальным, то есть, не повторяться больше на странице нигде. К этому блоку позже будет обращаться скриптовая часть нашего кода. Поэтому, если поменяете идентификатор блока, то нужно будет корректировать и скриптовую часть примера. Поэтому в следующих примерах цифры идут по нарастающей.

В итоге должен получиться примерно следующий код:

Javascript-часть

После размещения вышеперечисленного кода в разметке сайта мы можем теперь добавить первую карту.

Создание и динамическое размещение карты

Данного кода вполне достаточно для самого простейшего размещения карты на сайте. В нем указываются географические координаты центра карты и устанавливается отображаемое увеличение.

Ниже мы рассмотрим, что можно на эту базовую карту добавить.

Определение значений географических координат по клику на карте

Теперь немного усложним наш код, добавив в html-разметку блок, в котором будут выводиться координаты клика мыши по карте..

широта

долгота

И разместим его внутри блока с картой. В итоге его код приобретет уже следующий вид:


		
		

широта

долгота

Теперь подлючим javascript:

Результат выполнения кода виден ниже. Кликните левой кнопкой мыши по любому месту этой карты для определения географицеских координат этого клика.

широта

долгота

Варианты добавления меток на карту

В данном примере рассмотрим два варианта добавления меток на Яндекс-карту.

В первом случае (метка defaultPlacemark) мы добавляем стандартную метку непосредственно в центр нашей карты, получая его координаты методом getCenter() объекта myMap. Также можно ввести в качестве первого аргумента 2-элементный массив с координатами нужной точки. Далее задаем текст всплывающей надписи (аналог атрибута title) - hintContent и текст, появляющийся при клике на метку - balloonContent. Свойство draggable третьего аргумента - булево значение, определяющее возможность перетаскивания метки по карте. По умолчанию оно false.

Во втором случае (метка myPlacemark) мы используем в качестве первого аргумента 2-элементный массив, определяющий географические координаты метки. Также мы используем более подробное описание бэллуна, прописывая в отдельных свойствах второго аргумента тексты шапки, тела и подвала бэллуна. В третьем аргументе, отвечающем за опции возвращаемого конструктором объекта, мы задаем соответственно шаблон, путь к нашей иконке метки, ее размеры и смещение относитьельно ее координат на карте.

По аналогии с приведенными примерамы вы сможете размещать свои объекты на Яндекс-карте, присваивая их меткам собственные изображения, тексты и прочие возможности.

Сводный пример

Ну, и в завершении приведем пример, как объединить все перечисленные возможности на одной карте.

широта

долгота

Комментарии к теме (0)

Комментариев пока нет.

Дабавить комментарий