Question

我正在使用google maps javascript API，如下所示

      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
       <script type="text/javascript">
            // When the window has finished loading create our google map below
            google.maps.event.addDomListener(window, 'load', init);

            function init() {
                // Basic options for a simple Google Map
                // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
                var mapOptions = {
                    // How zoomed in you want the map to start at (always required)
                    zoom: 6,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP,
    },

                    // The latitude and longitude to center the map (always required)
                    center: new google.maps.LatLng(57.444879, 24.743874), 

                    // How you would like to style the map. 
                    // This is where you would paste any style found on Snazzy Maps.
                    styles: [{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#d3d3d3"}]},{"featureType":"transit","stylers":[{"color":"#808080"},{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#b3b3b3"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"weight":1.8}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"color":"#d7d7d7"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ebebeb"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"color":"#a7a7a7"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#efefef"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#696969"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"color":"#737373"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#d6d6d6"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"color":"#dadada"}]}]
                };

                // Get the HTML DOM element that will contain your map 
                // We are using a div with id="map" seen below in the <body>
                var mapElement = document.getElementById('map');

                // Create the Google Map using our element and options defined above
                var map = new google.maps.Map(mapElement, mapOptions);

                // Let's also add a marker while we're at it
                 var image = new google.maps.MarkerImage("http://media.voog.com/0000/0036/9367/photos/naftalogo_facebook.png", null, null, null, new google.maps.Size(62,62)); // Create a variable for our marker image.
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(59.444879, 24.743874),
                        icon:image, //use our image as the marker
                    map: map,
                    optimized: false,
                    zIndex: 100
                });
                marker.set('zIndex', google.maps.Marker.MAX_ZINDEX + 999);
            }
        </script>
     <div id='map'></div>

在地图的顶部有一个div，中间有一条线，z-index：99如下：

    .contact-wrap:after {
        content: '';
        width: 1px;
        height: 100%;
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 99;
        position: absolute;
        background: #000;
        top: 0;
    }
.contact-wrap {
    height: 100%;
    width: 1370px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 99;
    top: 0;
    position: absolute;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

虽然我认为我已经正确设置了地图图标的z-index，但该行仍位于图标的顶部。

Answer 1

z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）

尝试在css中将图标的位置css规则设置为relative，这样可以使z-index正确应用于您的图标。

position:relative;

Google Maps javascript API图标z-index无效

1 个答案: