Тук искам само информационното поле - без стрелка:
<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>
Тук искам само информационното поле - без стрелка:
<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>
Добавете този css:
.gm-style .gm-style-iw-t::after {
background: none;
box-shadow:none;
}
Ето ванилия 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, воала стрелката е скрита.
Можете да го направите с 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);
domready
събитие. Няма нужда да чакате 2 секунди
- person Cristian Traìna; 18.10.2018