Sprawdzone metody

Sprawdzone metody JS

Maps JavaScript API działa tylko w standardowym środowisku ECMAScript i W3C DOM. Oznacza to, że modyfikacja lub zastąpienie 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ą kolidować z interfejsem Maps JavaScript API, zmieniając działanie przeglądarki, przez co nie jest 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 Array.from() i Element.prototype.remove() na niestandardowe sposoby.
  • MooTools (starsze wersje): zastępuje Array.from() w niestandardowy sposób.
  • DateJS (starsze wersje): zastępuje zasadę 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 Twojej stronie mogą zastępować style mapy i powodować 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 do określania stylu JavaScript często używają resetowania CSS lub normalizatora do radzenia sobie z różnicami w renderowaniu w różnych przeglądarkach. 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 kodu 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.

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

Zgodność ze specyfikacją

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

Typowe elementy CSS, takie jak img, button i a, można zastąpić stylami strony. Jednym z najczęstszych sytuacji jest ustawienie atrybutu max-width elementu img na 100 procent. Może to spowodować zniekształcenia lub ukryte komponenty mapy, zwłaszcza jeśli 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 i wewnętrznych elementów DOM interfejsu JavaScript Maps 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 JavaScript korzysta z tego typu odwołań, rozwiązaniem może okazać się nasza rekomendacja dotycząca zastąpienia rozmiaru ramki.

Zastępowanie rozmiaru pola CSS

Zastąpienia rozmiaru pola CSS umożliwiają obejście konfliktów stylów 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 wartość border-box.
  • Użyj pola box-sizing: inherit w przypadku wszystkich elementów oprócz mapy.
  • Utwórz niestandardowy kontener mapy, który resetuje element box-sizing do wartości initial.

Przykładowy kod CSS:

html {
  box-sizing: border-box;
}

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

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