Z-индекс маркера карт Google над слоем непрозрачности - PullRequest
0 голосов
/ 14 июня 2019

Попытка добавить слой непрозрачности между картой и значком маркера, который должен покрывать карту, но маркер должен быть над ней (более высокий Z-индекс).

До сих пор я пробовал элемент: after для контейнера #map, но он не работает должным образом, маркер не может быть поднят над ним.

#map:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-color: #3388ff;
}

У меня естьтакже попытался добавить div к слою управления, как это

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('overlay_map'));

Но я все еще не могу достичь более высокого z-индекса для маркера, так как #overlay_map добавляется как тот же уровень div, чем iframe длякарта не внутри фрейма.Вот полный код:

function initMap() {
  var myLatLng = {lat: 59.438936, lng: 24.761484};

                var mapOptions = {
                          zoom: 16,
                    center: myLatLng,
            disableDefaultUI: true,

                    styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#111419"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#f9fbff"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#f9fbff"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#ecf0f4"},{"lightness":20}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"simplified"},{"lightness":"-4"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f9fbff"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#d9dfe8"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f9fbff"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e5eaf0"},{"lightness":17}]}]
                };

                var mapElement = document.getElementById('map');

                var map = new google.maps.Map(mapElement, mapOptions);

                var marker = new google.maps.Marker({
                    position: myLatLng,
                    optimized: false,
                    zIndex:99999999,
                    map: map,
                      icon:'<?php bloginfo('template_directory'); ?>/assets/map_pin.svg'
                });
                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('overlay_map'));

}
  window.initMap = initMap;

Я прикрепил два изображения: текущий результат / то, что я пытаюсь достичь.Любой совет, как этого добиться?Может ли это быть достигнуто с помощью стиля карты?

Текущий результат (маркер под слоем непрозрачности): enter image description here

Результат поиска (маркер над слоем непрозрачности):enter image description here

1 Ответ

0 голосов
/ 17 июня 2019

Завершено с использованием заливки Polygin для всего мира, как следующий код:

  var TheWorld = [
    new google.maps.LatLng(0, -90),
    new google.maps.LatLng(0, 90),
    new google.maps.LatLng(90, -90),
    new google.maps.LatLng(90, 90),
  ];

  ThisIsIt = new google.maps.Polygon({
    paths: [TheWorld],
    strokeColor: "#3388ff",
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: "#3388ff",
    fillOpacity: 0.5
  });

  ThisIsIt.setMap(map);

Спасибо за помощь в комментарии.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...