html - 如何删除地图中的信息窗口箭头？

Question

在这里我只想要信息框 - 没有箭头：

<info-window id="foo-iw" position="AK">
<div ng-non-bindable>
    <div class="header" ng-click="expand()">
        <span>Alaska <i class="caret"></i>
        </span>
   </div> 
</info-window>

Answer 1

添加这个CSS：

.gm-style .gm-style-iw-t::after {
    background: none;
    box-shadow:none;
}

Answer 2

这是一个香草 JS，无插件解决方案：

// Find where you actually open the infowindow.
infowindow.open(map);

// Paste the following:

// In OP's case, the element ID is actually 'foo-iw', as they're using a template.
el = document.getElementById('infowindow-content').parentNode.parentNode;

el = el.previousElementSibling || el.previousSibling;
el.children[0].setAttribute('class', 'hidden');
el.children[2].setAttribute('class', 'hidden');
// And of course, in CSS, have a generic .hidden{display:none;} rule.

这需要在您打开信息窗口后运行，因为 Google 地图会进行一些 DOM 更改，如果您过早使用 .parentNode，您将遍历 HTML 的错误区域以试图找到您想要处理的元素。如果您为信息窗口定义自定义 HTML 模板，情况尤其如此…… GM 将接受它并在 DOM 中移动它。

---

无论如何，使用上述方法，您可以为所有 infowindow 元素设置类，如下所示：

el.setAttribute('class', 'infoWindowEntireBackground');

或者

el.children[0].setAttribute('class', 'infoWindowArrowShadow');
el.children[2].setAttribute('class', 'infoWindowArrow');
el.children[1].setAttribute('class', 'infoWindowBGShadow');
el.children[3].setAttribute('class', 'infoWindowBG');

---

警告：如果 Google 在未来的某个版本中更改 infowindow 元素的结构，任何这样的 DOM 遍历方法都会中断。在这种情况下，要么你小心（愚蠢），要么你只运行一个特定版本的 GM 脚本（这会给你带来其他优势，即控制）。

作为参考，有 infowindow 自定义插件，如infobox、snazzy-info-window，但据我所知，大多数都没有提供箭头隐藏功能。

或者： infobubble有一个箭头大小属性，除其他外，如果你将它设置为 0px，瞧，箭头是隐藏的。

Answer 3

您可以使用 jQuery 来隐藏绘制箭头的 div。只需将以下代码添加到您的 JS 文件中：

// Hide infowindow arrow/marker pointer
setTimeout(function() {
    var arrow_div = $(".gm-style-iw").prev();

    $("div:eq(0)", arrow_div).hide();
    $("div:eq(2)", arrow_div).hide();
}, 2000);