Wypróbuj

Aby dodać Bibliotekę kontekstu lokalnej do projektu, zainicjuj i skonfiguruj widok mapy lokalnego kontekstu.

Włącz wymagane interfejsy API i pakiety SDK.

Aby korzystać z lokalnej biblioteki kontekstu, musisz włączyć interfejs Maps JavaScript API i Places API. Aby to zrobić, wykonaj instrukcje włączania interfejsów API lub pakietów SDK. Pamiętaj, że obydwa interfejsy API muszą być włączone w tym samym projekcie w konsoli Google Cloud.

Wczytywanie lokalnej biblioteki kontekstu

Aby wczytać Bibliotekę kontekstu, załaduj w zwykły sposób interfejs Maps JavaScript API i dołącz te parametry:

• libraries=localContext wczytuje Lokalną bibliotekę kontekstową.
• Do korzystania z tej wersji wymagany jest program v=beta.
• key zawiera Twój klucz interfejsu API.
• callback wykonuje funkcję initMap().

Poniższy przykład pokazuje tag skryptu ze wszystkimi podanymi wyżej opcjami:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext&v=beta&callback=initMap">
</script>

Tworzenie nowego widoku mapy lokalnego kontekstu

Aby dodać Bibliotekę kontekstu lokalnej do strony internetowej, najpierw utwórz instancję LocalContextMapView i ustaw odpowiednie właściwości:

• element – element div, w którym ma się wyświetlać mapa (w tym przypadku nazwa to „mapa”).
• placeTypePreferences – typy miejsc, które powinny zostać zwrócone przez Lokalną bibliotekę kontekstu (maksymalnie 10).
• maxPlaceCount – maksymalna liczba miejsc do wyświetlenia (1–24).
• locationRestriction (opcjonalnie) – ogranicza wyszukiwanie miejsca do określonej lokalizacji. Domyślnie widoczny jest obszar mapy.

Gdy masz instancję LocalContextMapView, możesz ustawić Opcje mapy w wewnętrznej instancji Map. Mapa zawarta w obiekcie LocalContextMapView obsługuje wszystkie te same opcje mapy co standardowa mapa interfejsu API JavaScript Map Google. Poniższy przykład pokazuje tworzenie nowej instancji LocalContextMapView i ustawienie kilku opcji w wewnętrznych elementach Map:

let map: google.maps.Map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map!;

  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

window.initMap = initMap;
index.js

Przełóż ładowanie danych kontekstu lokalnego

Możesz opóźnić wczytywanie danych kontekstu lokalnego podczas inicjowania, ustawiając opcję LocalContextMapView maxPlaceCount na 0. Jest to przydatne, gdy chcesz poczekać, aż użytkownicy będą gotowi na wyświetlenie danych. Aby wczytać dane kontekstu lokalnego, ustaw dla parametru maxPlaceCount wartość 1 lub większą. Przykład poniżej pokazuje, jak zainicjować mapę bez wczytywania danych lokalnego kontekstu, a następnie ustawić maxPlaceCount, aby wczytać dane:

// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
  });

//...

// Show places now.
localContextMapView.maxPlaceCount = 12;

Przełącz wyświetlanie UI lokalnego kontekstu

Możesz przełączać elementy interfejsu użytkownika kontekstu lokalnego, ustawiając opcję LocalContextMapView maxPlaceCount na 0. Aby ponownie wyświetlić interfejs użytkownika kontekstu lokalnego, ustaw dla parametru maxPlaceCount wartość 1 lub większą.

Ustawianie minimalnych wymiarów mapy

Lokalna biblioteka kontekstu dostosowuje sposób wyświetlania na podstawie wyrenderowanego rozmiaru pliku LocalContextMapView. Minimalne obsługiwane wymiary elementu LocalContextMapView to:

• 300 x 480 pikseli (orientacja pionowa),
• 480 x 380 pikseli (orientacja pozioma)

Gdy element składowy elementu LocalContextMapView spadnie poniżej minimalnej liczby obsługiwanych wymiarów, elementy biblioteki lokalnej kontekstu, w tym selektor miejsca i ciekawe miejsca, będą niewidoczne. Poziom powiększenia w przeglądarce wpływa na minimalne obsługiwane wymiary. Jeśli np. okno przeglądarki jest powiększone do 200%, minimalne obsługiwane wymiary to 600 x 960 pikseli (orientacja pionowa) i 960 x 760 (orientacja pozioma).

Rekomendacje dotyczące usług porównywania cen

Klasy CSS w DOM (Local Context Library) nie są częścią publicznego interfejsu API, więc ich styl, modyfikowanie i wybieranie elementów nie jest obsługiwane. Aby uniknąć konfliktów stylów DOM, zdecydowanie zalecamy stosowanie się do tych wytycznych. Zadbaj też o to, aby w widoku Lokalnej biblioteki kontekstu wyświetlała się ta treść:

• Nie używaj klas CSS lokalnej biblioteki kontekstu, ponieważ mogą one ulec zmianie bez powiadomienia.
• Nie styluj, nie modyfikuj ani nie zaznaczaj elementów w ramach DOM biblioteki lokalnej.

Jeśli używasz platformy CSS, która wprowadza takie modyfikacje, być może uda Ci się obejść konflikty stylu.

Jeśli na przykład chcesz zmienić ogólną stronę box-sizing na border-box:

• Użyj zastąpień typu box-sizing, które ustawiają element <html> na border-box.
• W przypadku elementu zawierającego widok mapy Lokalnej biblioteki kontekstu użyj polecenia box-sizing: initial.
• W pozostałych elementach używaj elementu box-sizing: inherit.

To sprawia, że interfejs DOM biblioteki lokalnej jest zresetowany do standardowego ustawienia z selektorem o niskiej dokładności.box-sizing

Tak wygląda to w kodzie:

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

.container-for-google-maps {
  box-sizing: initial;
}