Sprawdzone metody

Sprawdzone metody dotyczące kodu JS

Interfejs Maps JavaScript API działa tylko w standardowym środowisku ECMAScript i W3C DOM. Oznacza to, że zmodyfikowanie lub zastąpienie działania wbudowanych klas i obiektów udostępnianych przez przeglądarkę może spowodować nieprawidłowe działanie interfejsu Maps JavaScript API. Czasami inne biblioteki mogą wchodzić w kolizję z interfejsem Maps JavaScript API, zmieniając działanie przeglądarki w taki sposób, że przestaje ona być standardowym środowiskiem ECMAScript. Interfejs Maps JavaScript API jest z nimi niezgodny.

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 mapę lub dostosowujesz ją 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 stylizacji używasz frameworku CSS lub komponentu JavaScript, może to spowodować dodatkowe konflikty stylów CSS z stylem mapy.

.

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

Takie zresetowanie 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 framework lub komponent odwołuje się do klas CSS lub elementów DOM interfejsu Maps JavaScript API.

Aby uniknąć takich konfliktów, warto wziąć pod uwagę kilka kwestii.

Zgodność ze specyfikacją

Wbudowany i połączony plik CSS jest stosowany do mapy przed stylami Map Google. Jeśli wszystkie style stron są zdefiniowane w osadzonym lub połączonym pliku CSS, postępuj zgodnie z zasadami specyficzności, aby mieć pewność, że na mapie 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, gdy atrybut max-width elementu img ma wartość 100%. Może to spowodować zniekształcenie lub ukrycie elementów mapy, zwłaszcza jeśli używasz okna informacji.InfoWindow

Aby rozwiązać ten problem, zaktualizuj 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 Maps JavaScript API. Ta funkcja nie jest obsługiwana i może spowodować wprowadzenie zmian w Twojej witrynie bez powiadomienia. Zamiast tego zalecamy utworzenie własnych klas CSS jako kontenerów mapy.

Jeśli platforma CSS lub komponent JavaScriptu używa tego typu odwołań, zalecamy zastąpienie rozmiaru pola.

Zastąpienie box-sizing w kodzie CSS

Zastępowanie rozmiaru pudełka w CSS może być sposobem na rozwiązanie konfliktów związanych ze stylami map. Może to być szczególnie przydatne, jeśli używasz frameworku CSS lub komponentu stylizacyjnego JavaScript. Jeśli na przykład box-sizing ma wartość border-box, wykonaj te czynności:

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

Przykład kodu CSS:

html {
  box-sizing: border-box;
}

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

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