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

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

这是一个普通的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.

这需要在打开infowindow后运行，因为谷歌地图会进行一些DOM更改，如果你过早使用.parentNode，你将会遍历HTML的错误区域试图查找你想要处理的元素。如果为infowindow定义一个自定义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脚本（它带来了其他优点，即控制）。

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

替代： infobubble有一个箭头大小属性，如果你将其设置为0px，则隐藏箭头。

Answer 2

添加此CSS：

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

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