Sprawdzone metody

Sprawdzone metody dotyczące JS

Zastępowanie działania i zgodność z biblioteką

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ą kolidować z interfejsem Maps JavaScript API, zmieniając zachowanie przeglądarki, tak że nie jest już 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.

Optymalizacja skuteczności wewnętrznej

Aby przyspieszyć wczytywanie strony, interfejs Maps JavaScript API może wewnętrznie opóźniać wczytywanie treści interaktywnych, dopóki element lub kontener nie zbliży się do widocznego obszaru. Te wewnętrzne optymalizacje mogą ulec zmianie w dowolnym momencie bez powiadomienia. Są one przeznaczone do zwiększania wydajności i nie powinny być używane jako mechanizm zarządzania płatnościami. Aby mieć pewność, że nie zostaną naliczone opłaty, dopóki element nie będzie widoczny, odłóż jego utworzenie w kodzie aplikacji.

Sprawdzone metody dotyczące usług 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 stylizacji używasz platformy CSS lub komponentu JavaScript, może to powodować dodatkowe konflikty CSS ze stylami mapy.

Platformy CSS i komponenty stylów JavaScriptu często używają resetowania lub normalizatora CSS, aby radzić sobie z różnicami 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 wiąże się to ze 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 platforma lub komponent odwołuje się do klas CSS lub elementów DOM interfejsu Maps JavaScript API.

Aby uniknąć takich konfliktów, weź pod uwagę kilka naszych zaleceń.

Zgodność ze specyfikacją

Osadzony i połączony kod CSS jest stosowany 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 szczegółowoś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 Twojej strony. Jednym z najczęstszych scenariuszy jest ustawienie atrybutu max-width elementu img na 100%. Może to spowodować zniekształcenie lub ukrycie komponentów mapy, zwłaszcza jeśli używasz InfoWindow.

Aby rozwiązać ten problem, możesz zaktualizować element img mapy, 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 i wewnętrznych elementów DOM interfejsu Maps JavaScript API. Nie jest to obsługiwane i może spowodować 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ń, nasze zalecenie dotyczące zastąpienia właściwości box-sizing może być rozwiązaniem tymczasowym.

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

Zastąpienie właściwości box-sizing w CSS może być rozwiązaniem problemu konfliktów stylów map. Może to być szczególnie przydatne, jeśli używasz platformy CSS lub komponentu do stylizacji JavaScriptu. Jeśli na przykład box-sizing ma wartość border-box, wypróbuj te rozwiązania:

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

Przykład CSS:

html {
  box-sizing: border-box;
}

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

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