Клуб API Карт

Как использовать API Яндекс.Карт без навыков программирования

tekunova
9 июня 2012, 13:18
Как использовать API Яндекс.Карт без навыков программирования

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

1

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

 



Конструктор схем проезда

Схемы проезда обычно не меняются, а создаются один раз на продолжительный промежуток времени (например, до переезда офиса). Поэтому для их создания удобно воспользоваться визуальным инструментом «Конструктор схем проезда», который позволяет разметить необходимые объекты на карте и получить готовый код для вставки на страницу.
Недостаток «Конструктора схем проезда» в том, что созданную карту нельзя так же просто отредактировать. Для изменения объектов или их местоположения приходится создавать либо новую карту в конструкторе, либо редактировать JavaScript вручную. Такой проблемы не возникнет при использовании сервиса «Мои карты».

Мои карты

Сервис «Мои карты» позволяет отмечать на карте метки, рисовать геометрические фигуры, а также изменять их внешний вид и описание, после чего можно поделиться ссылкой на созданную карту с друзьями либо разместить ее у себя на сайте. Для этого необходимо воспользоваться возможностью экспорта объектов, размеченных на карте, в виде YMapsML.

Мои карты

Чтобы добавить YMapsML-файл на карту, нужно:
1. Подключить на странице АПИ
для этого в тэг <head> нужно добавить
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>


2. Сразу за ним добавить код создания карты

<script type="text/javascript">
    ymaps.ready(function () {
        var map = new ymaps.Map('YMapsID', {
            center: [55.753994, 37.622093],
            zoom: 9,
            behaviors: ['default', 'scrollZoom']
        });

        //
Необходимо подставить свой URL.

        ymaps.geoXml.load("http://maps.yandex.ru/export/usermaps/ydthuh_cw37GmjF39vR9y0WBYIfsK7jX/")
            .then(function (res) {
                // Добавление загруженных из YMapsML-файла объектов на карту.
                map.geoObjects.add(res.geoObjects);
            });
    });
</script>

В этой строчке кода нужно заменить ссылку на карту на свою.
ymaps.geoXml.load("http://maps.yandex.ru/export/usermaps/ydthuh_cw37GmjF39vR9y0WBYIfsK7jX/")


Вы можете воспользоваться готовым примером, просто заменив в нем ссылку на YMapsML-файл.

Объекты, размещенные на карте таким образом, можно редактировать через интерфейс «Моих карт». Другими словами все изменения, внесенные в карту на Яндекс.Картах, автоматически отразятся в соответствующем YMapsML.

При добавлении YMapsML-файла из «Моих карт» вы также можете:
— подобрать центр и масштаб карты таким образом, чтобы все добавленные объекты были видны на карте.
— поменять внешний вид объектов (значки меток, толщину и цвет линий, стиль контура и заливки геометрических фигур).
В коде примера есть подсказки, как это сделать.

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

"Вы можете воспользоваться готовым примером, просто заменив в нем ссылку на YMapsML-файл." - Не сработает ! ещё координаты центра надо выставлять не над Москвой, и Зум !!!

там область выставляется по содержимому YmapsML

 

// Установка границ карты по размерам содержимого YMaspML-файла.
 var bounds = res.mapState && res.mapState.getBounds();
  
 bounds && map.setBounds(bounds);