Question

我正在使用Google maps V3 API。我在地图上添加了一个自定义控件。它的宽度为350px，高度为300px。当我在Map上打开infoWindow时，自定义控件将与infoWindow重叠。

有没有办法将infoWindow放在自定义控件之上？

Answer 1

如果您的问题中没有一些代码可以证明您的问题，我们或多或少会猜测您的问题是什么。

查看google.maps.MapPanes的参考文档告诉我们InfoWindow位于最顶层，但不清楚这些google.maps.Map.controls属于哪个窗格。

根据设计，您可能无法做到的事情。我要说谷歌地图团队是一个有目的的决定，以确保地图控件永远不会被遮挡。

Answer 2

我遇到了类似的问题。如上所述 - 虽然有使用自定义覆盖的解决方案，但无法使用自定义控件执行此操作。

This answer from SO应该提供足够的信息来解决这个问题。那里的解决方案会在标记上方显示叠加层，但同样会在InfoWindow图层下显示。

Answer 3

在信息窗口的控件前推送地图（包括信息窗口）打开并在关闭时将其拉回。

CSS：

.infoopen div[aria-label="Map"]{
 z-index:1!important;
}

js：

 google.maps.event.addListener(marker, 'click', function(event) {
  if(!infowindows[marker.myOwnTarget].anchor) var openme=true;

  $.each(markers,function(){
   infowindows[this.myOwnTarget].close();
   // show controls and legend on infowindow closing by clicking any marker
   $(".map").removeClass("infoopen");
  });

  if(openme){
   infowindows[marker.myOwnTarget].open(thamap, marker);
   // hide controls and legend on info open
   $(".map").addClass("infoopen");

   google.maps.event.addListener(infowindows[marker.myOwnTarget], 'closeclick', function () {
    // show controls and legend on close click
    $(".map").removeClass("infoopen");
   });
  }
 });

Answer 4

您已经问过“有没有办法将infoWindow置于自定义控件之上？”，如果我正确理解您的问题，那么您需要将z-index添加到您的infowindow属性中，以显示它/上面的客户控制。

您可以添加以下代码来实现此目的。

var infowindow = new google.maps.InfoWindow({ 
        zIndex: 1000
      });

自定义控件在Google Map Apiv3上与INFowindow重叠

4 个答案: