2

Вот макет

введите сюда описание изображения

То есть карта под полупрозрачной синей подложкой. А балун над подложкой. Как такое сделать на сайте используя яндекс карту?

1 ответ 1

0

Разработчики API Яндекс.Карт разрешают кастомизировать элементы карты через CSS-фильтры. В вашем случае нужно что-то вроде комбинации фильтров invert и grayscale, которые применяются к классу подложки (точное название селектора различно в зависимости от версии, но всегда заканчивается на *-ground-pane)

Ниже кликабельный пример:

var myMap;

// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);

function init () {
    // Создание экземпляра карты и его привязка к контейнеру с
    // заданным id ("map").
    myMap = new ymaps.Map('map', {
        // При инициализации карты обязательно нужно указать
        // её центр и коэффициент масштабирования.
        center: [55.76, 37.64], // Москва
        zoom: 10
    }, {
        searchControlProvider: 'yandex#search'
    });
        myMap.geoObjects
        .add(new ymaps.Placemark(myMap.getCenter(), {}, {
            preset: 'islands#dotIcon',
            iconColor: '#fdce69'
        }))
}
 html,  body,  #map {
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
 }
 [class*="ymaps-2"][class*="-ground-pane"]{
    filter:invert(100%) grayscale(100%) sepia(0.2) brightness(130%) contrast(90%);
}
<div id="map"></div>
<script type="text/javascript" 
        src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;
             apikey=f2686a80-efc2-4301-8053-e537610e13a3">
</script>
<style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
</style>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.