Sprawdzone metody JS
Maps JavaScript API działa tylko ze standardowym ECMAScript i DOM W3C dla środowiska. Oznacza to, że modyfikacja lub zastąpienie działania wbudowanych klasy i obiekty udostępnione przez przeglądarkę mogą sprawić, że interfejs Maps JavaScript API niedziałające. Czasami inne biblioteki mogą kolidować z kodem JavaScript Map Google interfejsu API przez zmianę działania przeglądarki, tak aby nie była już standardem. Środowisko ECMAScript. Interfejs Maps JavaScript API nie jest z nimi zgodny. biblioteki.
Biblioteki, o których wiadomo, że są niezgodne z interfejsem Maps JavaScript API:
- Prototyp: zastępuje
Array.from()
iElement.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 dodasz lub dostosujesz mapę za pomocą interfejsu Maps JavaScript API, niektóre style zastosowane do strony 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 powodować dodanie dodatkowe konflikty CSS ze stylami mapy.
Platformy CSS i komponenty stylu JavaScript często używają resetowania CSS
normalizator do obsługi różnic renderowania między przeglądarkami. Często używane są platformy
użyj elementu box-sizing
do skalowania marginesów i obramowań strony internetowej
. Zwykle wiąże się to z zmianą działania domyślnego przeglądarki z używania
content-box
do border-box
.
Ten typ resetowania CSS może powodować konflikty CSS z Maps JavaScript API bo interfejs API nie obsługuje zmian w arkuszu stylów klienta użytkownika. Dodatkowe informacje Konflikty CSS mogą wystąpić, jeśli platforma lub komponent odwołuje się do klas CSS lub Elementy 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 stylu CSS, postępuj zgodnie z reguły szczegółowej aby mieć pewność, że do mapy zostaną zastosowane poprawne style.
Typowe elementy CSS, takie jak img
, button
i a
, mogą zostać zastąpione przez tag
stylu strony. Jednym z najczęstszych sytuacji jest sytuacja, w której max-width
atrybutu elementu img
jest ustawiona na 100 procent. Może to powodować zniekształcenia
lub ukrytych komponentów mapy, zwłaszcza jeśli używasz
InfoWindow.
Aby rozwiązać ten problem, możesz zaktualizować element img
na swojej mapie, tak aby
Atrybut max-width
ma wartość none
. Na przykład:
#map img
{
max-width : none;
}
Nazwy klas
Nie odwoływać się do nazw klas i wewnętrznych elementów DOM Map JavaScript API. Ta funkcja nie jest obsługiwana i może spowodować zmiany powodujące niezgodność w witrynie bez uprzedzenia. Zamiast tego zalecamy utworzenie własnych klas CSS jako kontenery na mapie.
Jeśli platforma CSS lub komponent JavaScript używa tego typu odwołań, rekomendacja zastąpienia rozmiaru skrzynki może służyć jako na obejście problemu.
Zastępowanie rozmiaru pola CSS
Zastąpienia rozmiaru pola CSS umożliwiają obejście określania stylów map
konflikty. Jest to szczególnie przydatne, jeśli korzystasz z platformy CSS lub
Komponent 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ściinitial
.
Przykładowy kod CSS:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.container-map {
box-sizing: initial;
}