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 określania stylu używasz platformy CSS lub komponentu JavaScript, może to spowodować dodatkowe konflikty CSS ze stylami 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. Platformy często używają elementu box-sizing do skalowania marginesów i obramowań elementów strony internetowej. Zwykle oznacza to zmianę 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.

Poniżej znajdziesz kilka zaleceń, które pomogą Ci ich uniknąć.

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 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 sytuacji jest ustawienie atrybutu max-width elementu img na 100 procent. Może to spowodować zniekształcenie lub ukrycie elementów mapy, zwłaszcza jeśli używasz okna informacji.

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 Maps JavaScript API. Nie jest to obsługiwane i może powodować zmiany powodujące niezgodność w 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 zastosować zalecenie dotyczące zastąpienia rozmiaru pudełka.

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. Jest to szczególnie przydatne, jeśli używasz platformy CSS lub komponentu stylu 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;
}