22 декабря 2015
17 марта 2010
19
Яндекс.Карты, статья №1: Элементы управления и параметры вызова
Привет,
Сегодня мы начнем знакомство с апи Яндекс.Карт. Судя по вашим комментариям, мои статьи по Google Maps оказались полезными, поэтому я решил написать еще и про Яндекс.Карты.
Для начала давайте разберемся, зачем могут понадобиться Яндекс.Карты, если вы можете использовать Google Maps. Пожалуй самый веский аргумент для использования карт от Яндекса — лучшая поддержка городов России и СНГ. Да, Гуглокарты охватывают больше городов по миру, но по России Яндекс все же лучше.
Итак, хватит лирических отступлений, переходим к делу. Сегодня мы научимся подключать карты и настраивать элементы управления.
Вызов карты
Итак, для начала нужно сходить и получить ключ для работы с картами. Идем, получаем.
При вызове карты, она будет показываться внутри указанного вами блока, так что необходимо сначала этот блок создать. Затем, подключаем саму библиотеку Яндекс.Карт с указанным вами ключом:
...
<body>
<!-- Контейнер под карту -->
<div id="test-map" style="width:600px;height:400px"></div>
<!-- Подключение библиотеки карты -->
<script type="text/javascript" src="http://api-maps.yandex.ru/1.1/index.xml?key=ваш_ключ"></script>
...Ну тут все ясно. Теперь нам нужно вызвать карту, поместить ее в указанный контейнер и настроить. Вызов карты делается так:
<script type="text/javascript">
var map = new YMaps.Map(document.getElementById("test-map")); // создаем объект карты в элементе с айди 'test-map'
map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10); // центр карты (широта, долгота) и текущий уровень увеличения
</script>Теперь давайте посмотрим, как вызывать карту разного типа, ведь есть три встроенные типа карты:
- «схема» — схематичное отображение объектов местности, используется по умолчанию; значение для аттрибута типа — YMaps.MapType.MAP;
- «спутник» — спутниковая карта местности; YMaps.MapType.SATELLITE;
- «гибрид» — спутниковая карта с названиями географических объектов; YMaps.MapType.HYBRID.
Для того, чтобы при вызове карты задать отличный от умолчания тип, нужно вызвать метод setType() и сообщить ему нужный тип карты:
<script type="text/javascript"> ...
var map = new YMaps.Map(document.getElementById("test-map"));
map.setType(YMaps.MapType.HYBRID); // Тип карты - гибрид
... </script>
Элементы управления
Для управления картой существует несколько типов элементов управления.
Внешние
- переключатель типа карты: схема, спутник, гибрид; TypeControl();
- панель инструментов: перемещение карты, увеличение и измерение расстояния; ToolBar();
- элемент масштабирования: тут все ясно; Zoom();
- обзорная карта: уменьшенная карта показываемой местности; MiniMap();
- масштабная линейка: позволяет оценить расстояние на карте; ScaleLine();
- поиск по карте, позволяющий искать географические объекты; SearchControl();
Внешние элементы бывают пользовательские и встроенные. Пока что рассмотрим встроенные.
Для внешних элементов можно так же задавать их положение относительно границ блока карты, например чтобы расположить обзорну карту в правом нижнем углу с отступами в 10 пикселов от границ, нужно написать вот так:
<script type="text/javascript">
...
map.addControl(new YMaps.MiniMap(),
new YMaps.ControlPosition(
YMaps.ControlPosition.BOTTOM_RIGHT, // положение на карте
new YMaps.Size (10, 10) // отступы от границ
)
);
...
</script>Встроенные
- перемещение; enableDragging() и disableDragging();
- масштабирование двойным щелчком мыши; enableDblClickZoom() и disableDblClickZoom();
- масштабирвоание колесиком мыши; enableScrollZoom() и disableScrollZoom();
- лупа; enableMagnifier() и disableMagnifier();
- горячие клавиши («+» и «-» для масштаба и стрелки «←» «→» для перемещения карты); enableHotKeys() и disableHotKeys();
- линейка; enableRuler() и disableRuler().
Подключение (отключение) встроенного элемента управления происходит вот так:
<script type="text/javascript">
...
// Включаем масштабирование скроллингом мыши
map.enableScrollZoom();
...
</script>Пользовательский внешний элементы управления
Рассмотрим этот момент на примере создания маркера в центре карты. Исходная задача: поместить на карту кнопку, при клике на которую по центру карты создавался бы маркер. Я написал реализацию кода и прокомментировал все ключенвые моменты:
<script type="text/javascript">
...
// Пользовательский элемент упраления,
// при клике на который по центру карты
// появляется маркер
function createMarkerInCenter () {
// Обработчик добавления элемента на карту
this.onAddToMap = function (map) {
this.container = YMaps.jQuery("<span>Добавить маркер</span>"); // контейнер контрола
this.map = map;
_this = this;
this.position = new YMaps.ControlPosition(YMaps.ControlPosition.TOP_RIGHT, new YMaps.Size(5, 40)); // положение на карте
// CSS-свойства, определяющие внешний вид элемента
this.container.css({
border: '1px solid #D50505',
position: 'absolute',
zIndex: YMaps.ZIndex.CONTROL,
background: '#FFF',
listStyle: 'none',
padding: '5px',
margin: 0
});
// Обрабатываем клик по конролу
this.container.bind("click", function (map) {
var cCoords = _this.map.getCenter(); // получаем координаты центра
var placemark = new YMaps.Placemark(cCoords); // создаем марке
// Добавляет метку на карту
_this.map.addOverlay(placemark);
});
// Располагает элемент управления в верхнем правом углу карты
this.position.apply(this.container);
// Добавляет элемент управления на карту
this.container.appendTo(this.map.getContainer());
}
// Обработчик удаления элемента с карты
this.onRemoveFromMap = function () {
// Действия при удалении элемента с карты
if (this.container.parent()) {
this.container.remove();
this.container = null;
}
this.map = null;
};
}
// Добавляем контрол на карту
map.addControl(new createMarkerInCenter());
...
</script>
Ну вот, все готово. Смотрим рабочий пример:
Заключение
В этой статье мы научились вызывать карту (с различными параметрами) и настраивать ее внешний под наши нужды (в том числе создавать свои элементы управления).
А теперь несколько полезных ссылок:
- официальный сайт АПИ Яндекс.Карт;
- блог и клуб разработчиков — частенько что-нибудь интересное проскакивает.
Если у вас есть какие-то вопросы или замечания по статье, то задавайте, не стесняйтесь. До новых встреч!
А будет статья с задачей:
1. Определить по введённому адресу координаты и сохранить с базу
2. Вывести на страничку из базы и позиционировать согласно сохранённым координатам
Большое спасибо.
Больше всего интересно бы было узнать - как добавлять маркер по клику на карту, записывать его в базу и выбирать его тип, описание, название.
Жду следующих статей по теме.
Сделал всё как в статье, но появляется серый контейнер(