时间戳

首页 > 解决方案 > 谷歌在不透明层上方映射标记 Z-index

javascript - 谷歌在不透明层上方映射标记 Z-index

问题描述

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

到目前为止，我已经尝试了 #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，因为 #overlay_map 添加为与不在 iframe 内的地图的 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;

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

当前结果（不透明层下方的标记）： 在此处输入图像描述

寻找的结果（不透明层上方的标记）： 在此处输入图像描述

标签： javascriptgoogle-mapsgoogle-maps-api-3

解决方案

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

感谢评论中的帮助者。

推荐阅读