GMaps V3 InfoWindow - 禁用关闭“x”按钮

Posted 2023-02-23

【中文标题】GMaps V3 InfoWindow - 禁用关闭“x”按钮

【英文标题】：GMaps V3 InfoWindow - disable the close "x" button

【发布时间】：2013-09-26 19:43:00

【问题描述】：

据我所知，在 GMaps API v2 中有一个 InfoWindow 对象的属性“按钮”，可以通过给定 InfoWindow 没有关闭按钮的方式定义它：

marker.openInfoWindowhtml("No Close Button",buttons:close:show:4);

但上述内容不适用于 v3。有人知道怎么做吗？我读到了一个名为InfoBox 的替代InfoWindow 的实用程序，但它在过去2 年里一直没有开发。我目前使用的是最新的 3.13 版本的 Gmaps v3 API。

如果没有更好的解决方案，使用 jQuery 的解决方法是可以接受的。

【参考方案1】：

检查它 - 它是一个带有 close 类的 div - 您可以使用 CSS 定位它并将其设置为 display: none;

【参考方案2】：

更新

在谷歌地图上显示<div> 很简单：

示例css：

div.info 
    position: absolute;
    z-index: 999;
    width: 200px;
    height: 100px;
    display: none;
    background-color: #fff;
    border: 3px solid #ebebeb;
    padding: 10px;

标记中某处的info 类<div>：

<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div>

对 div 有一个简短的引用总是很高兴：

var info = document.getElementById('myinfo');

更棘手的部分，显示<div>，如何以及何时 - 在这里我只是为地图分配一个点击处理程序（在它创建之后）并在地图内的鼠标位置 XY 处显示信息<div>：

google.maps.event.addListener(map, 'click', function(args) 
  var x=args.pixel.x; //we clicked here
  var y=args.pixel.y;

  info.style.left=x+'px';
  info.style.top=y+'px';
  info.style.display='block';
);

您的收获是，每次点击时，<div> 信息都会在地图上跟随您。

您将需要更多样式以符合您的需要，例如“看起来像一个信息框”，但这应该很容易找到，我不是图书管理员 :) 也许稍后会用一些东西来关闭信息，但你一开始并不想要:)

---

原答案

你不能！在当前的 v3.13 InfoWindow options 中没有办法做到这一点。

解决方法是禁用包含 X 的图像：

<style>
img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] 
    display: none;

</style>

但这绝不可取！

src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png 正是信息窗口所指的今天。明天，或者一个月，或者一年，这个图像参考肯定会改变。如您所见，如果您搜索类似的“解决方案”，随着时间的推移而制定 - 例如this。今天都坏掉了，比如努力是没有意义的。

我认为谷歌“拒绝”遵循隐藏关闭按钮的请求是非常好的逻辑。如果您不需要关闭按钮，那么您还需要 InfoWindow 做什么？当您最好在地图上显示<div> 时。

【讨论】：

您能否提示一下如何在地图上显示一个看起来像 InfoBox 的 <div>？

"如果您不需要关闭按钮，您还需要 InfoWindow 做什么？" - 你可以用 mouseout 事件关闭 infoWindow...

【参考方案3】：

如果使用 jquery 只需添加这个

$(".gm-style-iw").next("div").hide();

【讨论】：

你可以用纯 CSS 做到这一点，只需使用 + 符号来获取下一个兄弟：.gm-style-iw + div display: none;

【参考方案4】：

我自己的方式（没有 Jquery）并重新对齐到 infoWindow 的中心：

var content = document.querySelector('.gm-style-iw');
content.parentNode.removeChild(content.nextElementSibling);
content.style.setProperty('width', 'auto', 'important');
content.style.setProperty('right', content.style.left, 'important');
content.style.setProperty('text-align', 'center', 'important');

【参考方案5】：

我使用了 Tushar Gaurav 给出的答案，但将其扩展了一点......

$(".gm-style-iw:contains(" + infoText + ")").css("left", function() 
    return ($(this).parent().width() - $(this).width()) / 2;
).next("div").remove();

这将从带有 infoText 文本的信息窗口中删除 X，然后在删除关闭按钮后将文本居中，因为它偏离中心。

只是为像我一样偶然发现此页面的其他人添加此内容。

【讨论】：

我喜欢这个答案，因为它允许更改特定的信息窗口，而不仅仅是全部。由于未知原因，文本没有真正居中，但可以使用 css: text-align: center

【参考方案6】：

您可以将信息窗口的“closeBoxURL”属性设置为“”，它会使按钮消失。

var infowindow = new google.maps.InfoWindow(
    content: contentString,
    closeBoxURL: ""
);

【讨论】：

为什么我的答案是-1？

是的，不是一个有效的选项：developers.google.com/maps/documentation/javascript/…

【参考方案7】：

closeBoxURL: ""

如前所述，不适用于InfoWIndow。这是InfoBox 上的一个选项。

例如，您可以使用此 CSS 解决方法来删除 X 和周围的可点击按钮：

.gm-style-iw + div 
  display: none;

正如 davidkonrad 所说。这是今天的代码解决方法。它可能会改变。

【参考方案8】：

我的解决方案：

            google.maps.event.addListener(marker, 'click', function() 

            var wnd = new google.maps.InfoWindow(
                content: "<table id='viewObject' >...</table>"
            );

            google.maps.event.addListener(wnd, 'domready', function()

                $("#viewObject").parent().parent().next().remove();
            );

            wnd.open(map, marker);
        );

【讨论】：

谢谢，如果您只想删除某些信息窗口的 x，它可以工作

【参考方案9】：

感谢 Tushar，但您还需要将此代码放入事件处理程序中

google.maps.event.addListener(infowindow, 'domready', function()
    $(".gm-style-iw").next("div").hide();
);
    

【参考方案10】：

你可以使用它。这不会隐藏其他图像，如缩放控制、平移控制等。 在信息窗口的 dom 准备就绪上，您可以使用它。

google.maps.event.addListener(infoWindow, 'domready', function () 

      document.querySelector(".gm-style-iw").nextElementSibling.style.display = "none";
);

【参考方案11】：

在 jQuery 的 gmap3 插件中可以使用

google.maps.event.addListener($('#map').gmap3(get:name:"infowindow"), 'domready', function()
    $(".gm-style-iw").next("div").remove();
);

【参考方案12】：

你可以只使用选项

closeBoxURL : ""

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html

来自 Google 文档

closeBoxURL | string | 代表关闭框的图像的 URL。注意：默认为 Google 标准关闭框的 URL。放 如果不需要关闭框，则将此属性设置为 ""。

例子

   var infowindow = new google.maps.InfoWindow(
                          closeBoxURL: "",
                          closeBoxMargin : ""

                        );

【讨论】：

Err，刚刚准备好上面复杂的答案。不知道它是如何被标记为正确的。这是简单而正确的答案！不错！

我和你做的完全一样...“我刚刚读过的WTF”是我最接近的想法...遗憾的是，上面的用户“nan”也正确回答了，但被正确的投票否决了回答。我对他投了赞成票，并在答案中添加了我自己的香料。

infowindow != infobox

有趣的事情，如果你用谷歌搜索“信息框关闭按钮隐藏”，它会带你到这个页面，这是唯一有效的解决方案，哈哈

对我也不起作用。我认为它不适用于 3.20 版

【参考方案13】：

即使在加载 DOM 后调用代码时，我也无法获得任何 $(".gm-style-iw").next("div").hide(); 答案，因为在调用代码和创建信息窗口之间存在延迟。我所做的是创建一个间隔，直到它找到信息窗口并删除“X”元素。如果有更好的方法请告诉我。

var removeCloseButton = setInterval(
    function()
    
        if ($(".gm-style-iw").length)
        
            $(".gm-style-iw").next("div").remove();
            clearInterval(removeCloseButton);
        
    ,
    10
);

【参考方案14】：

你也可以通过css来实现。

.gm-style-iw + div display: none;

---

2019 年 1 月编辑 正如@antmeehan 在评论中所说，

Google 更改了 HTML，关闭按钮现在是按钮元素而不是 div

所以隐藏“x”按钮的css代码现在是：

.gm-style-iw + button display: none;

【讨论】：

为我工作，它似乎是最好和最简单的解决方案

仍然受 Google 改变实现方式的影响 - 取决于信息窗口类保持不变，关闭按钮是紧随其后的下一个 div。但至少它很简单。

Google 更改了 HTML，关闭按钮现在是按钮元素而不是 div。

谢谢。一个问题，你为什么在声明中使用+？它通过声明 .gm-style-iw button 而不带 + 符号来工作。实际上它应该是.gm-style-iw > button，因为如果您在框中有其他自定义按钮，它也会被隐藏。将其作为答案，供未来用户参考。

+ 运算符将选择紧跟在 gm-style-iw 类元素之后的所有 元素。 > 运算符将选择父元素包含类 .gm-style-iw 的所有 元素。我认为两者都可以实现相同的目标。

【参考方案15】：

使用弓箭手方法我需要做的

$(".gm-style-iw").css("left", function()  //remove close and recenter
  return ($(this).parent().width() - $(this).find(">:first-child").width()) / 2;
).next("div").remove();

【参考方案16】：

要扩展 Louis Moore 的回答，您还可以在移除关闭按钮后将文本居中：

.gm-style-iw + div display: none;
.gm-style-iw text-align:center;

不居中：

带居中：

【讨论】：

这确实是迄今为止正确且最有效的答案。但老实说，为什么谷歌不支持隐藏它。

【参考方案17】：

google.maps.event.addListener(infowindow, 'domready', function() 

    var iwOuter = jQuery('.gm-style-iw');

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.remove()
);

由于没有通过 API 参数隐藏它的选项，您必须通过定位内容窗口来找到元素并将其删除。

希望这会有所帮助:)

【参考方案18】：

我在这里找不到正确的答案，所以我自己修复了它。它会很好用。

google.maps.event.addListener(infowindow, 'domready', function()
      $(".gm-style-iw").parent().find("button").removeAttr("style").hide();
);

【参考方案19】：

.gm-style-iw + 按钮 display: none !important;

【讨论】：

和this answer有什么区别？

【参考方案20】：

这行得通

.gm-style-iw > button display: none !important;

【参考方案21】：

=============  HTML  ==============
<agm-map #gm [latitude]="lat" [longitude]="lng" #AgmMap [fitBounds]="true">
 <agm-marker
          (mouseOver)="onMouseOver(infoWindow, gm)"
          (mouseOut)="onMouseOut(infoWindow, gm)"
        >

         <div id="test">
            <agm-info-window #infoWindow></agm-info-window>
          </div>
        </agm-marker>
      </agm-map>

=============  TS  ==============

onMouseOver(infoWindow, gm) 
console.log(infoWindow);
if (gm.lastOpen != null) 
 gm.lastOpen.close();

gm.lastOpen = infoWindow;
infoWindow.open();
setTimeout(() => 
  var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
, 10);

onMouseOut(infoWindow, gm) 
gm.lastOpen = infoWindow;
// infoWindow.close();

【参考方案22】：

应该是.gm-style-iw > button 以避免我们可能在框中也隐藏的其他自定义按钮：

.gm-style-iw > button 
  display: none !important;

【讨论】：

非常感谢，拯救我的一天。 :)

【参考方案23】：

Anno domini 2021 这对我来说效果更好

button.gm-ui-hover-effect 
  display: none !important;

【参考方案24】：

2021 年 5 月：在您的 CSS 中添加：

button.gm-ui-hover-effect 
   visibility: hidden;

这与 Maps API v3.43 完美配合