Как да премахна стрелката на информационния прозорец в картата?

Тук искам само информационното поле - без стрелка:

Тук искам само информационното поле - без стрелка.

<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, използвайки помощна програма за карти за създаване на персонализиран infoWindow и някои алтернатива на трета страна   -  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, за да скриете divs, които рисуват стрелката. Просто добавете следния код във вашия 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