自定义控件与 Google Map Apiv3 上的信息窗口重叠答案

【问题标题】：custom controls are overlapping infowindow on Google Map Apiv3自定义控件与 Google Map Apiv3 上的信息窗口重叠
【发布时间】：2013-07-10 22:02:43
【问题描述】：

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

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

【问题讨论】：

如果您发布代码 sn-p 将非常有帮助。

标签： google-maps google-maps-api-3 custom-controls infowindow

【解决方案1】：

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

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

根据设计，您尝试执行的操作可能无法实现。我想说这是 Google 地图团队的一个有目的的决定，以确保地图控件不会被遮挡。

【讨论】：

【解决方案2】：

我遇到了类似的问题。如上所述 - 尽管有使用自定义叠加的解决方案，但无法使用自定义控件来做到这一点。

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

【讨论】：

【解决方案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");
   });
  }
 });

【讨论】：

【解决方案4】：

您问过“有没有办法将 infoWindow 放在自定义控件之上？”，如果我正确理解了您的问题，那么您需要将 z-index 添加到您的 infowindow 属性中，以将其显示在上方/顶部客户控制。

您可以添加以下代码来实现这一点。

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

【讨论】：

由于窗格的分层方式，这将不起作用，如果您增加信息窗口窗格的 zindex，则整个地图将放置在控件上方