Google maps 谷歌地图:信息盒出现在标记后面?

Google maps 谷歌地图:信息盒出现在标记后面?,google-maps,google-maps-api-3,z-index,infowindow,infobox,Google Maps,Google Maps Api 3,Z Index,Infowindow,Infobox,不知什么原因,我的信息箱出现在标记后面。我知道这是不可能的,但事实并非如此。以下是我的标记代码: var yellowCircle={ path: google.maps.SymbolPath.CIRCLE, scale: 5, fillColor: '#faeadd', strokeColor: 'black', fillOpacity: 1.0, strok

不知什么原因,我的信息箱出现在标记后面。我知道这是不可能的,但事实并非如此。以下是我的标记代码:

        var yellowCircle={
          path: google.maps.SymbolPath.CIRCLE,
          scale: 5,
          fillColor: '#faeadd',
          strokeColor: 'black',
          fillOpacity: 1.0,
          strokeWeight: 0.5,
          zIndex:-10
        };

        var yellowBlackCircle={
          path: google.maps.SymbolPath.CIRCLE,
          scale: 5,
          fillColor: '#faeadd',
          strokeColor: 'black',
          fillOpacity: 1.0,
          strokeWeight: 1.5,
          zIndex:-10

        };


            var marker = new google.maps.Marker({       
                position: new google.maps.LatLng(Lat,Lng), 
                map: map,  
                title: name,
                icon:yellowCircle,
                url:url,
                zIndex:-1,
            });

             google.maps.event.addListener(marker, 'mouseover', function() {
            marker.setIcon(yellowBlackCircle);
              });

            google.maps.event.addListener(marker, 'mouseout', function() {
                marker.setIcon(yellowCircle);
                });

             google.maps.event.addListener(marker, 'click', function() {
              window.location.href = url;
             });
以及我的信息框的代码:

    var myOptions = {
                content: name
                ,boxStyle: {
                  border: "1px solid black"
                 ,textAlign: "center"
                 ,fontSize: "12pt"
                 ,fontType: "arial"
                 ,backgroundColor: "#faeadd"
                 ,fontWeight: "bold"
                 ,zIndex:1
                }
               ,disableAutoPan: true
               ,pixelOffset: new google.maps.Size(-getTextWidth(name, "bold 12pt arial")/2,-30)
               ,position: new google.maps.LatLng(49.47216, -123.76307)
               ,closeBoxURL: ""
               ,isHidden: false
               ,pane: "mapPane"
               ,enableEventPropagation: true
               ,zIndex:1
            };

            var infobox = new InfoBox(myOptions);

             google.maps.event.addListener(marker, 'mouseover', function() {
                infobox.open(map,marker);
              });

              google.maps.event.addListener(marker, 'mouseout', function() {
                infobox.close();
              });
您可以看到,我甚至尝试设置zIndex'es,但没有效果。我相信这个问题和我在一篇文章中被问到的问题是一样的

我为没有附加JSFIDLE而道歉-我似乎无法使它工作,即使在我将infobox_packed.js上载到存储库以便添加is作为外部资源之后。相反,事情是这样的:


信息框代码主要是从中复制的。

您的代码来自制作“地图标签”的示例,您正在将信息框附加到地图窗格:

pane: "mapPane"
这将把它放在标记后面。如果要将其替换为infowindow,请复制该示例中的代码:

pane: "floatPane"

中,您的代码来自制作“地图标签”的示例,您正在将信息框附加到地图窗格:

pane: "mapPane"
这将把它放在标记后面。如果要将其替换为infowindow,请复制该示例中的代码:

pane: "floatPane"