Sprawdzone metody

Sprawdzone metody dotyczące JavaScriptu

Interfejs Maps JavaScript API działa tylko w standardowym środowisku ECMAScript i W3C DOM. Oznacza to, że modyfikowanie lub zastępowanie działania wbudowanych klas i obiektów udostępnianych przez przeglądarkę może spowodować, że interfejs Maps JavaScript API przestanie działać. Czasami inne biblioteki mogą powodować konflikty z interfejsem Maps JavaScript API, zmieniając działanie przeglądarki tak, że nie jest już ona standardowym środowiskiem ECMAScript. Interfejs Maps JavaScript API nie jest zgodny z tymi bibliotekami.

Biblioteki, które są niezgodne z interfejsem Maps JavaScript API:

  • Prototyp: zastępuje 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 usługi porównywania cen

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

Frameworki CSS i komponenty stylów JavaScript często używają resetu CSS lub normalizatora, aby radzić sobie z różnicami w renderowaniu między przeglądarkami. Frameworki często używają elementu box-sizing do skalowania marginesów i obramowań elementów strony internetowej. Zwykle polega to na zmianie domyślnego działania przeglądarki z content-box na border-box.

Ten typ resetowania CSS może powodować 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 framework lub komponent odwołuje się do klas CSS lub elementów DOM interfejsu Maps JavaScript API.

Aby uniknąć tych konfliktów, warto wziąć pod uwagę kilka naszych rekomendacji.

Zgodność ze specyfikacją

Osadzone i połączone arkusze CSS są stosowane do mapy przed stylami Map Google. Jeśli wszystkie style strony są zdefiniowane w osadzonym lub połączonym arkuszu CSS, postępuj zgodnie z regułami specyficzności, aby mieć pewność, że do mapy zostaną zastosowane prawidłowe style.

Typowe elementy CSS, takie jak img, button i a, mogą zostać zastąpione przez style strony. Jednym z najczęstszych scenariuszy jest sytuacja, w której atrybut max-width elementu img jest ustawiony na 100%. Może to powodować zniekształcenie lub ukrycie elementów mapy, zwłaszcza jeśli używasz InfoWindow.

Aby rozwiązać ten problem, możesz zaktualizować element img na mapie, tak 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ć nieoczekiwane zmiany w witrynie. Zamiast tego zalecamy utworzenie własnych klas CSS jako kontenerów mapy.

Jeśli framework CSS lub komponent JavaScript używa tego typu odwołań, nasza rekomendacja dotycząca zastąpienia właściwości box-sizing może stanowić obejście tego problemu.

Zastąpienie właściwości box-sizing w CSS

Zastąpienia modelu pudełkowego CSS mogą stanowić obejście problemów z konfliktami stylów map. Może to być szczególnie przydatne, jeśli używasz platformy CSS lub komponentu stylizacji JavaScript. Jeśli na przykład wartość box-sizing jest ustawiona na border-box, spróbuj wykonać te czynności:

  • Utwórz box-sizing zastąpienie, które ustawi element <html> na border-box.
  • Używaj box-sizing: inherit w przypadku wszystkich elementów innych niż mapa.
  • Utwórz niestandardowy kontener mapy, który resetuje element box-sizing do wartości initial.

Przykład CSS:

html {
  box-sizing: border-box;
}

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

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