Как убрать стрелку информационного окна на карте?

Здесь мне нужно только информационное поле - без стрелки:

Здесь мне нужно только информационное поле - без стрелки.

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

person Danish    schedule 07.07.2016    source источник
comment
Существует множество решений, которые вы можете использовать: javascript, используя утилита карт для создания пользовательского информационного окна и некоторых сторонняя альтернатива   -  person Mr.Rebot    schedule 08.07.2016


Ответы (3)


Добавьте этот css:

.gm-style .gm-style-iw-t::after {
    background: none;
    box-shadow:none;
}
person Harry    schedule 16.10.2019

Вот ванильное решение 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 Maps вносит некоторые изменения в DOM, и если вы используете .parentNode слишком рано, вы будете перемещаться по неправильной области вашего HTML, пытаясь найти нужные элементы. хотите работать дальше. Это особенно важно, если вы определяете собственный HTML-шаблон для своего информационного окна... GM возьмет его и переместит в DOM.


В любом случае, используя описанный выше метод, вы можете установить классы для всех элементов информационного окна, например:

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

or

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

Предупреждение: любой метод обхода DOM, подобный этому, сломается, если Google изменит структуру элементов информационного окна в какой-либо будущей версии. В этом случае либо вы следите за этим (глупо), либо просто запускаете определенную версию сценария GM (что дает вам другие преимущества, например, контроль).

Для справки, существуют плагины для настройки информационного окна, такие как информационное окно, snazzy-info-window, но насколько как я могу сказать, большинство из них не предлагают функцию скрытия стрелок.

ВАРИАНТ: информационный пузырь размер стрелки, среди прочего, и если вы установите его на 0px, вуаля, стрелка будет скрыта.

person MarsAndBack    schedule 27.01.2018

Вы можете сделать это с помощью 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);
person Alexis    schedule 03.08.2017
comment
google.maps.event предоставляет событие domready. Не нужно ждать 2 секунды - person Cristian Traìna; 18.10.2018