Google 将标记 Z 索引映射到不透明层上方

Question

尝试在地图和标记图标之间添加一个不透明层，该层应覆盖地图但标记应位于其上方（更高的 Z 索引）。

到目前为止，我已经为 #map 容器尝试了 :after 元素，但这并没有像预期的那样工作，无法将标记提升到它上面。

#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-index，因为对于不在 iframe 内的地图，#overlay_map 添加为与 iframe 相同的级别 div。这是完整的代码：

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;

我附上了两张图片：当前结果/我正在努力实现的目标。关于如何实现这一目标的任何建议？这可以通过地图样式实现吗？

当前结果（不透明层下方的标记）：

查找结果（不透明层上方的标记）：

Answer 1

最后用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);

感谢评论中的帮手

Google 将标记 Z 索引映射到不透明层上方

Google maps marker Z-index above opacity-layer

javascript

google-maps

google-maps-api-3