Question

所以这就是我如何创建叠加层（标准方式）。问题是，当我拖动地图时，叠加层会落后于缩放栏和其他控件。我希望这些控件落后于叠加层。我尝试更改叠加层的z-index，但这不起作用，因为叠加层的父级具有低z-index。如果我更改父项的z-index，则控件将被整个地图隐藏。因此，改变z-index不起作用的原因是因为叠加和缩放条例如在2个不同的div中，它们本身具有z-index。

<html>
<head>
    <style type="text/css">
        #map {
            width: 600px;
            height: 500px;
        }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var map;
        TestOverlay.prototype = new google.maps.OverlayView();
        /** @constructor */
        function TestOverlay(map) {
            this.setMap(map);
        }

        /**
         * onAdd is called when the map's panes are ready and the overlay has been
         * added to the map.
         */
        TestOverlay.prototype.onAdd = function() {
            var div = document.createElement('div');
            div.innerHTML = "I want the zoombar to go behind me.";
            div.style.backgroundColor = "white";
            div.style.position = "relative";
            div.style.fontSize = "20px";
            // Add the element to the "overlayLayer" pane.
            var panes = this.getPanes();
            panes.overlayLayer.appendChild(div);
        };

        TestOverlay.prototype.draw = function() {
        };

        // The onRemove() method will be called automatically from the API if
        // we ever set the overlay's map property to 'null'.
        TestOverlay.prototype.onRemove = function() {
        };
        function init() {
            var mapCenter = new google.maps.LatLng(-35.397, 150.644);
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 8,
                center: mapCenter
            });
            new TestOverlay(map);
        }
        google.maps.event.addDomListener(window, 'load', init);
    </script>
</head>
<body>
    <div id="map"></div>
</body>

如你所见。有一个叠加，关于它，其余来自谷歌地图api。提前谢谢。

所以，最后，非常hacky和丑陋，但这是我如何做到的：

<html>
    <head>
        <style type="text/css">
            #map {
                width: 600px;
                height: 500px;
            }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var map;
            var ol;
            TestOverlay.prototype = new google.maps.OverlayView();
            /** @constructor */
            function TestOverlay(map) {
                this.setMap(map);
            }

            /**
             * onAdd is called when the map's panes are ready and the overlay has been
             * added to the map.
             */
            TestOverlay.prototype.onAdd = function() {
                var div = document.createElement('div');
                div.id = "dummy";
                // Add the element to the "overlayLayer" pane.
                var panes = this.getPanes();
                panes.overlayMouseTarget.appendChild(div);
            };

            TestOverlay.prototype.draw = function() {
            };

            // The onRemove() method will be called automatically from the API if
            // we ever set the overlay's map property to 'null'.
            TestOverlay.prototype.onRemove = function() {
            };
            function init() {
                var mapCenter = new google.maps.LatLng(-35.397, 150.644);
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 8,
                    center: mapCenter
                });
                google.maps.event.addListenerOnce(map, 'idle', function() {
                    var div = document.createElement('div');
                    div.id = "overlay";
                    div.className = "gmnoprint";
                    div.innerHTML = "Yes, the controls go behind me ;)";
                    div.style = "background-color:white;z-index:100000000000;position:absolute";
                    $(".gm-style").append(div);
                });
                google.maps.event.addListener(map, 'drag', function() {

                    $("#overlay").css("left", $("#dummy").parent().parent().parent().css("left"))
                    $("#overlay").css("top", $("#dummy").parent().parent().parent().css("top"))
                });
                ol = new TestOverlay(map);
            }
            google.maps.event.addDomListener(window, 'load', init);
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

想法是叠加层与控件位于同一级别，并且叠加层应该是虚拟叠加层。当触发拖动事件时，我得到虚拟div的坐标，并将其放入我的叠加div中。多数民众赞成:)。

Answer 1

根据我的理解，自定义叠加有6层，如下所示

mapPane
overlayLayer
overlayShadow
窗格在overlayImage
floatShadow
overlayMouseTarget
floatPane

不幸的是，他们从未将其设计为允许覆盖在控件之上，因为在某些情况下这会使地图无用。

如果您还没有，请查看涵盖自定义叠加层的开发者网站。谁知道可能还有一项工作没有人找到。

https://developers.google.com/maps/documentation/javascript/customoverlays#hide_show

如何使谷歌地图的叠加站在缩放栏的顶部

1 个答案: