Пример создания собственной карты на сайт Яндекс.Карты API 2.0

Пример создания собственной Яндекса карты для сайта используя 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 Яндекс.Карты.

Демо

Прикреплённые файлы

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

Похожие материалы