Sprawdzone metody

Sprawdzone metody JS

Interfejs Maps JavaScript API działa tylko w standardowym środowisku ECMAScript i W3C DOM. Oznacza to, że modyfikowanie lub zastąpienie działania wbudowanych klas i obiektów dostarczonych przez przeglądarkę może spowodować, że interfejs Maps JavaScript API nie będzie działać. Czasami inne biblioteki mogą powodować konflikt z interfejsem Maps JavaScript API, zmieniając działanie przeglądarki w taki sposób, że nie będzie ona już standardowym środowiskiem ECMAScript. Interfejs Maps JavaScript API jest niezgodny z tymi bibliotekami.

Biblioteki, o których wiadomo, że są niezgodne z interfejsem Maps JavaScript API:

  • Prototyp: zastępuje wartości Array.from() i Element.prototype.remove() w niestandardowy sposób.
  • MooTools (starsze wersje): zastępuje Array.from() w niestandardowy sposób.
  • DateJS (starsze wersje): zastępuje Date.now() w niestandardowy sposób.

Czasami można zmodyfikować niezgodne biblioteki, aby usunąć niestandardowe zastąpienia.

Sprawdzone metody dotyczące CSS

Gdy dodajesz lub dostosowujesz mapę za pomocą interfejsu Maps JavaScript API, niektóre style, które stosujesz na stronie, mogą zastąpić style mapy i spowodować konflikty CSS. Jeśli do określania stylu używasz platformy CSS lub komponentu JavaScript, może to spowodować dodatkowe konflikty CSS ze stylami mapy.

Platformy CSS i komponenty stylów JavaScript często używają resetu CSS lub normalizatora do obsługi różnic w renderowaniu między przeglądarkami. Platformy często używają elementu box-sizing do skalowania marginesów i obramowań elementów strony internetowej. Zwykle wymaga to zmiany domyślnego działania przeglądarki z content-box na border-box.

Ten typ resetowania arkusza CSS może spowodować konflikty CSS z interfejsem Maps JavaScript API, ponieważ interfejs API nie obsługuje zmian w arkuszu stylów klienta użytkownika. Dodatkowe konflikty CSS mogą wystąpić, jeśli platforma lub komponent odwołuje się do klas CSS lub elementów DOM interfejsu Maps JavaScript API.

Aby uniknąć takich konfliktów, zalecamy zapoznanie się z kilkoma zaleceniami.

Zgodność ze specyfikacją

Osadzony lub powiązany kod CSS jest stosowany do mapy przed stylami Map Google. Jeśli wszystkie style strony są zdefiniowane w osadzonym lub powiązanym kodzie CSS, postępuj zgodnie z regułami zgodności, aby mieć pewność, że na mapie zostaną zastosowane właściwe style.

Typowe elementy CSS, takie jak img, button i a, można zastąpić stylem strony. Jednym z najczęstszych scenariuszy jest ustawienie atrybutu max-width elementu img na 100 procent. Może to spowodować zniekształcenie lub ukryte elementy mapy, zwłaszcza gdy używasz InfoWindow.

Aby rozwiązać ten problem, możesz zaktualizować element img mapy, aby atrybut max-width miał wartość none. Na przykład:

#map img
{
    max-width : none;
}

Nazwy klas

Nie odwołuj się do nazw klas ani wewnętrznych elementów DOM interfejsu JavaScript Maps API. Nie jest to obsługiwane i może spowodować zmiany powodujące niezgodność w witrynie bez powiadomienia. Zamiast tego zalecamy tworzenie własnych klas CSS jako kontenerów dla mapy.

Jeśli platforma CSS lub komponent JavaScript korzysta z tego typu odwołań, obejściem może okazać się nasze zalecenie zastąpienia rozmiaru pól.

Zastąpienie rozmiaru pola CSS

Zastąpienia rozmiaru pola CSS mogą być obejściem konfliktów stylów map. Może to być szczególnie przydatne, jeśli używasz platformy CSS lub komponentu stylów JavaScript. Jeśli np. box-sizing ma wartość border-box, spróbuj wykonać te czynności:

  • Utwórz zastąpienie box-sizing, które ustawia element <html> na border-box.
  • Użyj atrybutu box-sizing: inherit w przypadku wszystkich elementów innych niż mapa.
  • Utwórz własny kontener mapy, który resetuje element box-sizing do stanu initial.

Przykładowy kod CSS:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}