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

Источник: https://tech.yandex.ru/maps/doc/jsapi/2.0/quick-start/tasks/quick-start-docpage/


 

Начало работы с API


JavaScript API Яндекс.Карт — это набор JavaScript-компонентов, позволяющий размещать на страницах сайта интерактивные карты.
Для того чтобы вставить карту на страницу и разместить на ней объект (например, метку), выполните описанные ниже действия.

Шаг 1. Подключите API

Прежде чем использовать функции API, необходимо загрузить в браузер JavaScript-файлы, в которых эти функции определены. Для этого добавьте в заголовок head HTML-страницы строку следующего вида:
<head>
    ...
    <script src="https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
    ...
</head>
По адресу api-maps.yandex.ru/2.0-stable/ находится загрузчик, который при обращении к нему подключает нужные компоненты API.
Подробнее о подключении API.

Шаг 2. Создайте контейнер для карты

Создайте видимый контейнер ненулевого размера, в котором будет размещена карта. В качестве контейнера может использоваться любой HTML-элемент блочного типа (например, элемент div с заданной шириной и высотой). Карта заполнит этот элемент полностью.
<body>
    <div id="map" style="width: 600px; height: 400px"></div>
</body>
Уникальный идентификатор (id) контейнера будет использоваться в следующем шаге для получения указателя на контейнер карты.

Шаг 3. Создайте карту

Создайте экземпляр класса карты, в конструкторе которого укажите id контейнера, ее центр и коэффициент масштабирования.
<script type="text/javascript">
    var map = new ymaps.Map ("map", {
            center: [55.76, 37.64], 
            zoom: 7
        });
</script>
Совет. По умолчанию координаты принято задавать в последовательности «широта, долгота». Изменить порядок задания координат можно с помощью параметра coordorder при подключении API.
Для того чтобы не определять координаты центра карты вручную, воспользуйтесь инструментом Определение координат.
Создавать карту следует после того, как веб-страница загрузится целиком. Это даст уверенность в том, что контейнер для карты создан и к нему можно обращаться по id. Чтобы инициализировать карту после загрузки страницы, можно воспользоваться функцией ready().
Функция ready вызовется тогда, когда API будет загружен и DOM сформирован:
<script type="text/javascript">
    ymaps.ready(init);
    var myMap;

    function init(){     
        myMap = new ymaps.Map ("map", {
            center: [55.76, 37.64],
            zoom: 7
        });
    }
</script>
Подробнее о создании карты.

Шаг 4. Добавьте метку на карту

В API метки реализуются с помощью класса Placemark. Перед тем как добавить метку на карту, создайте экземпляр этого класса. При создании метки вы можете задать текст её иконки, а также текст балуна, который откроется при нажатии кнопкой мыши на этой метке.
<script type="text/javascript">
  ymaps.ready(init);
    var myMap,
        myPlacemark;

    function init(){     
        myMap = new ymaps.Map ("map", {
            center: [55.76, 37.64],
            zoom: 7
        });

        myPlacemark = new ymaps.Placemark([55.76, 37.64], { content: 'Москва!', balloonContent: 'Столица России' });
    }
</script>
После того как метка была создана, её можно добавить на карту. Добавление объектов на карту осуществляется через их добавление в глобальную коллекцию объектов карты myMap.geoObjects:
<script type="text/javascript">
  ymaps.ready(init);
    var myMap,
        myPlacemark;

    function init(){     
        myMap = new ymaps.Map ("map", {
            center: [55.76, 37.64],
            zoom: 7
        });

        myPlacemark = new ymaps.Placemark([55.76, 37.64], { 
            hintContent: 'Москва!', 
            balloonContent: 'Столица России' 
        });

        myMap.geoObjects.add(myPlacemark);
    }
</script>
Подробнее об объектах карты.
Результат

Полный текст примера:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Быстрый старт. Размещение интерактивной карты на странице</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
    <script type="text/javascript">
        ymaps.ready(init);
        var myMap, 
            myPlacemark;

        function init(){ 
            myMap = new ymaps.Map ("map", {
                center: [55.76, 37.64],
                zoom: 7
            }); 
            
            myPlacemark = new ymaps.Placemark([55.76, 37.64], {
                hintContent: 'Москва!',
                balloonContent: 'Столица России'
            });
            
            myMap.geoObjects.add(myPlacemark);
        }
    </script>
</head>

<body>
    <div id="map" style="width: 600px; height: 400px"></div>
</body>

</html>

Реализация

  • 8.2

  • Процедура ПриОткрытии()
     ТекстДок = "<html>
        |<head>
        |    <title>Быстрый старт. Размещение интерактивной карты на странице</title>
        |    <meta http-equiv=""Content-Type"" content=""text/html; charset=windows-1251"" />
        |    <script src=""https://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU"" type=""text/javascript""></script>
        |    <script type=""text/javascript"">
        // Отключим ошибки выполнения скрипта
        |    window.onerror = myOnError;
        |        ymaps.ready(init);
        |        var myMap, 
        |           myPlacemark;
        |
        |      function init(){ 
        |           myMap = new ymaps.Map (""map"", {
        |               center: [55.76, 37.64],
        |               zoom: 7
        |          }); 
        |            
        |            myPlacemark = new ymaps.Placemark([55.76, 37.64], {
        |                hintContent: 'Москва!',
        |                balloonContent: 'Столица России'
        |            });
        |            myMap.geoObjects.add(myPlacemark);
        |        }
        // Процедура регенерации ошибки сведена к минимуму, чтобы не показывать ошибки
        |    function myOnError(msg, url, lno) {return true}     
        |   </script>
        |</head>
        |<body>
        |    <div id=""map"" style=""width:  100%; height:  100%""></div>
        |</body>
        |</html>";
     ЭлементыФормы.HTMLДокумента.УстановитьТекст(ТекстДок);
    КонецПроцедуры
    
  • 8.3

Comments