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索引，因为#overlay_map被添加为与iframe相同的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;

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

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

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

Answer 1

最终使用Polygin fill填充了整个世界，如下代码：

  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-index映射到不透明层上方

1 个答案: