Вывод Яндекс.Карт в шаблоне

Скопировать ссылку на статью

Скопировано

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

Старый варинат выглядит так:

<script src="https://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>

Новый вариант выглядит так:

<script src="{{ yandex_maps_api('2.0', { lang: 'ru-RU', load: 'package.full' }) }}" type="text/javascript"></script>

Для того, чтобы вставить Яндекс.Карту в печатную форму, необходимо:

Подключить в самом конце блока <head> строку со скриптом <script src="{{ yandex_maps_api('2.0', { lang: 'ru-RU', load: 'package.full' }) }}" type="text/javascript"></script>
В блоке <body> установить переменную mapId {% set mapId = 'order-' ~ order.number ~ '-map' %}
В нужном месте макета, где предполагается вывести изображение карты, указать <img id="{{ mapId }}" class="map" src="" alt="" />

Перед закрывающим тегом </body> указать выполняемый скрипт:

<script type="text/javascript">
// Загрузка API
ymaps.ready(function () {
    var divs = document.querySelectorAll('.order-address');

    [].forEach.call(divs, function(div) {
        var addr = (div.innerHTML + '').trim();

        if (!addr) {
            return;
        }

        ymaps.geocode(addr, {
            /**
             * Опции запроса
             * @see http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/geocode.xml
             */
            // boundedBy: myMap.getBounds(), // Сортировка результатов от центра окна карты
            // strictBounds: true, // Вместе с опцией boundedBy будет искать строго внутри области, указанной в boundedBy
            results: 1 // Если нужен только один результат, экономим трафик пользователей
        }).then(function (res) {
            // Выбираем первый результат геокодирования.
            var firstGeoObject = res.geoObjects.get(0),

            // Координаты геообъекта.
            coords = firstGeoObject.geometry.getCoordinates();

            var place = coords[1]+","+coords[0];
            var newImg = document.getElementById(div.dataset.id);
            newImg.src = "http://static-maps.yandex.ru/1.x/?l=map&size=400,350&spn=0.006,0.006&ll="+place+"&pt="+place+",pm2wtl";
            newImg.style.display = 'block';
        });
    });
});
</script>

При верстке печатной формы, в месте, где вы используете вывод строки адреса, например:
<div>Адрес доставки: <span class="order-address" data-id="{{ mapId }}">{{ order.deliveryAddress.fullAddressString }}</span></div>

Необходимо использовать в теге <span>:

class = "order-address" и идентификатор data-id = "{{ mapId }}", так как именно отсюда скрипт берет все вложенные элементы в классе "order-address" и может их в дальнейшем использовать у себя;
из data-id скрипт возьмет координаты для определения геоточки на карте.

Благодарим за отзыв.

Была ли статья полезна?

Нет

Да

Предыдущая статья

Пример вставки изображения в шаблон документа

В статье рассмотрим, как вставить необходимое изображение в шаблон печатной формы.

Вывод Яндекс.Карт в шаблоне Скопировать ссылку на статью Скопировано

Вывод Яндекс.Карт в шаблоне

Скопировать ссылку на статью

Скопировано