Содержание
Обновление варианта обращения к API
Если вы используете старый вариант обращения к 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скрипт возьмет координаты для определения геоточки на карте.