Пример создания собственной Яндекс карты для сайта используя API 2.0.
Источником информации является документация Начало работы с API. Мой пример не сложный, основная идея была сделать карту в серых тонах со своим маркером.
Результат можно увидеть на изображении, а рабочий пример в конце страницы.
Итак, создание карты состоит из следующих этапов:
1. Подключение компонентов API 2.0 Яндекс.Карты.
2. Инициализация.
3. Добавление произвольного маркера.
4. Добавление элементов управления.
5. Изменение цвета фона и элементов карты.
1. Подключение компонентов API Яндекс.Карты.
Для того, чтобы карта заработала, на сайте нужно подключить внешний JavaScript-файл на нужной странице сайта:
<script src="https://api-maps.yandex.ru/2.0/?load=package.standard,package.geoObjects&lang=ru-RU" type="text/javascript"></script>
2. Инициализация карты.
Перед созданием карты нужны координаты. Их можно узнать, набрав адрес в сервисе Яндекс.Карты. Также стоит указать zoom - уровень масштабирования.
// Инициализация карты
ymaps.ready(init);
function init () {
//Центрирование и выбор масштаба карты
var myMap = new ymaps.Map('map', {
center: [55.757741, 37.624725], //ввод координат
zoom: 18 // масштаб
});
};
3. Добавление произвольного маркера.
Для создание своего маркера необходимо: указать координаты, на которых будет центрирован маркер; хинт - подсказку; путь к изображению и смещение, если необходимо передвинуть маркер относительно центра.
// Создание своей метки
var myPlacemark = new ymaps.Placemark(
// Координаты метки
[55.757741,37.624725] , {
// Свойства метки
hintContent: 'Мой маркер' //Подсказка при наведении на маркер
}, {
iconImageHref: 'http://delay-delo.com/demo/icono_metas.png', // картинка иконки
iconImageSize: [45, 45], // размеры картинки
iconImageOffset: [-70, -40] // смещение картинки
});
4. Элементы управления.
Для удобства, необходимо добавить элементы управления. В моём примере есть лишь несколько элементов, если вам нужно больше, стоит посмотреть документацию в разделе элементы управления:
//Элементы управления
myMap.controls
// Кнопка изменения масштаба
.add('zoomControl')
// Список типов карты
.add('typeSelector')
// Кнопка изменения масштаба - справа
.add('smallZoomControl', { right: 5, top: 75 })
// Стандартный набор кнопок
.add('mapTools')
//Линейка масштаба
.add(new ymaps.control.ScaleLine());
5. Изменение цвета фона и элементов карты.
Градиент получить можно используя стили css. Таким образом можно указать любой оттенок)
/*Размер карты*/
#map { width:100%;height:500px }
/*Отображение карты в черно-белом цвете */
.ymaps-glass-pane, .ymaps-layers-pane {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") !important;
/* Firefox 3.5+ Chrome 19+ & Safari 6+ */
-webkit-filter: grayscale(100%) !important;
}
Полный листинг примера:
1<!DOCTYPE html>
<html>
<head><meta http-equiv=Content-Type content='text/html; charset=utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />
<title>Своя Яндекс карта</title>
<meta name="description" content="Своя Яндекс карта">
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="https://api-maps.yandex.ru/2.0/?load=package.standard,package.geoObjects&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
// Инициализация карты
ymaps.ready(init);
function init () {
//Центрирование и выбор масштаба карты
var myMap = new ymaps.Map('map', {
center: [55.757741, 37.624725],
zoom: 18
});
// Создание своей метки
var myPlacemark = new ymaps.Placemark(
// Координаты метки
[55.757741,37.624725] , {
// Свойства метки
hintContent: 'Мой маркер' //Подсказка при наведении на маркер
}, {
iconImageHref: 'http://delay-delo.com/demo/icono_metas.png', // картинка иконки
iconImageSize: [45, 45], // размеры картинки
iconImageOffset: [-70, -40] // смещение картинки
});
// Добавление метки на карту
myMap.geoObjects.add(myPlacemark);
//Элементы управления
myMap.controls
// Кнопка изменения масштаба
.add('zoomControl')
// Список типов карты
.add('typeSelector')
// Кнопка изменения масштаба - справа
.add('smallZoomControl', { right: 5, top: 75 })
// Стандартный набор кнопок
.add('mapTools')
//Линейка масштаба
.add(new ymaps.control.ScaleLine());
}
</script>
<style>
/*Размер карты*/
#map { width:100%;height:500px }
/*Отображение карты в черно-белом цвете */
.ymaps-glass-pane, .ymaps-layers-pane {filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") !important;
/* Firefox 3.5+ Chrome 19+ & Safari 6+ */
-webkit-filter: grayscale(100%) !important;
}
</style>
</head>
<body>
<h1 align="center">Своя Яндекс карта</h1>
<div id="map"></div>
</body>
</html>
Это всё! Надеюсь что мой небольшой пример ответит на пару вопросов и продемонстрирует часть возможностей API Яндекс.Карты.
Демо
- Войдите, чтобы оставлять комментарии
- 4384 просмотра
Спасибо за пример, но как я понял, с версии апи я.карт выше 2.0, яндекс ограничивает возможность просто взять и вставить карту на страницу. Теперь требуется рега на сервисе яндекс для получения ключа по которому уже будет работать подключенный апи