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

Question

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

marker.openInfoWindowHtml("No Close Button",{buttons:{close:{show:4}}});

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

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

score 37 · Accepted Answer

你也可以通过css来实现。

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

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

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

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

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

score 19 · Accepted Answer

更新

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

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

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 选项中没有办法做到这一点。

一种解决方法是禁用包含 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正是今天信息窗口所指的内容。明天，或者一个月，或者一年，这个图像参考肯定会改变。如您所见，如果您搜索类似的“解决方案”，随着时间的推移而制定 - 就像这样。他们今天都坏了，例如努力是没有意义的。

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

score 16 · Accepted Answer

16

如果使用 jquery 只需添加这个

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

于 2013-10-15T08:47:06.383 回答

score 15 · Accepted Answer

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

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

没有居中：

居中：

score 12 · Accepted Answer

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

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

score 7 · Accepted Answer

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

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

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

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

score 6 · Accepted Answer

closeBoxURL: ""

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

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

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

正如大卫康拉德所说。这是今天的代码解决方法。它很可能会改变。

score 6 · Accepted Answer

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

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

score 4 · Accepted Answer

我自己的方式（没有 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');

score 3 · Accepted Answer

3

这有效

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

于 2019-04-28T17:21:35.893 回答

score 2 · Accepted Answer

我的解决方案：

            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);
        });

score 2 · Accepted Answer

=============  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();

}

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

1

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

于 2019-01-24T15:19:24.090 回答

score 0 · Accepted Answer

即使在加载 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
);

score 0 · Accepted Answer

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 参数隐藏它，因此您必须通过定位内容窗口来查找元素并将其删除。

希望这可以帮助：）

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

使用弓箭手方法我需要做

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

score -1 · Accepted Answer

在 jQuery 的 gmap3 插件中，这可以使用

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

score -1 · Accepted Answer

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

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

这与 Maps API v3.43 完美配合

score -2 · Accepted Answer

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

score -3 · Accepted Answer

您可以只使用该选项

closeBoxURL : ""

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

来自谷歌文档

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

例子

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

                        });

score -4 · Accepted Answer

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

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

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

24 回答 24

更新

原始答案

但这绝不是可取的！

Related

Reference