Ustawianie lokalnego kontekstu i opcji mapy

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

W tej sekcji opisujemy opcje, które możesz ustawić w instancji LocalContextMapView, oraz wewnętrzne Map, które zawiera LocalContextMapView. Przy tworzeniu nowej instancji LocalContextMapView możesz określić maksymalnie 10 typów miejsc oraz maksymalną liczbę miejsc do zwrócenia (maksymalnie 24). Wewnętrzna właściwość Map obsługuje wszystkie te same atrybuty MapOptions co standardowy interfejs API JavaScript Map Google Map.

W każdej chwili po zainicjowaniu biblioteki lokalnej kontekstu możesz zaktualizować jej właściwości wyszukiwania. Aktualizacja dowolnych wartości maxPlaceCount, placeTypePreferences, locationRestriction lub locationBias może automatycznie spowodować nowe wyszukiwanie.

Określanie typów miejsc

Możesz określić maksymalnie 10 typów miejsc, które powinny zostać zwrócone przez Lokalną bibliotekę kontekstową. Określ typy miejsc za pomocą właściwości placeTypePreferences i przekaż co najmniej jeden typ miejsca, jak pokazano w tym przykładzie:

placeTypePreferences: ['restaurant', 'cafe']

Waga typu miejsca

Do każdego określonego typu możesz opcjonalnie przypisać wagę względną, co powoduje, że typy z większą wartością pojawiają się częściej. Waga to opcjonalny, zaawansowany parametr, którego należy używać tylko w razie potrzeby. Jeśli pominiesz ten parametr, biblioteka lokalna kontekstu określi domyślne wagi, które mogą się zmienić i ulepszyć.

Do każdej właściwości możesz przypisać względną wagę, używając atrybutu weight. Poniższy przykład pokazuje wagę określonych typów miejsc, aby zwrócić dwa razy więcej wyników dla restaurant i cafe niż w przypadku primary_school:

placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]

Wyniki mogą się różnić w zależności od tego, czy określony typ miejsca istnieje w określonym obszarze. Na przykład przypisanie wagi do 10 punktów shopping_mall nie będzie miało wpływu, jeśli na tym obszarze nie ma centrów handlowych.

Ustawianie maksymalnej liczby miejsc

Aby ustawić maksymalną liczbę miejsc (maksymalnie 24), które powinna zwrócić biblioteka lokalna kontekstu, użyj właściwości maxPlaceCount jak w tym przykładzie:

maxPlaceCount: 12

Ustawianie ograniczenia lokalizacji

Wyszukiwanie jest domyślnie powiązane z widocznym obszarem mapy. Możesz określić zestaw limitów, by ograniczyć wyniki wyszukiwania do większego lub mniejszego obszaru. Aby to zrobić, ustaw właściwość locationRestriction elementu LocalContextMapView na odpowiednią wartość LatLngBounds. Ta wartość może być większa lub mniejsza niż widoczny obszar mapy. Zobacz przykład

Włączanie trasy

Aby włączyć wskazówki na mapie, ustaw właściwość directionsOptions elementu LocalContextMapView, przekazując punkt literał obiektu LatLng dla punktu początkowego (punkt końcowy jest określany przez obecnie wybrane miejsce). Jeśli punkt początkowy nie zostanie przekazany, wskazówki dojazdu będą wyłączone. Poniższy przykład pokazuje ustawienie punktu początkowego, który pozwala włączyć na mapie trasę pieszą:

directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},

Rozmiar widocznego obszaru mapy określony za pomocą granic mapy i poziomu powiększenia bezpośrednio wpływa na odległości, które można zwrócić z danego punktu początkowego. Jeśli na przykład widoczny obszar ma wyświetlać obszar o szerokości 160 km, ciekawe miejsca mogą się pojawić w odległości do 50 km od punktu początkowego. Aby mieć pewność, że aplikacja wyświetli trasy dla pieszych z rozsądną odległością, możesz:

  • Wyłącz trasę pieszą przy niższych poziomach powiększenia (zwykle poniżej poziomu powiększenia 16).
  • Zdefiniuj locationRestriction za pomocą mniejszego obszaru granicznego. Dzięki temu ciekawe miejsca nie będą się wyświetlać poza obszarem ograniczeń.

Zmiana punktu początkowego trasy

Wartość właściwości directionsOptions możesz zmienić w każdej chwili w cyklu życia elementu LocalContextMapView. Poniższy przykład pokazuje ustawienie nowej wartości w polu directionsOptions:

localContextMapView.directionsOptions = {
  origin: {lat: 47.6532809, lng: -122.3512206},
};

lub to

localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};

Ustawianie układu i widoczność

Aby ustawić początkową lokalizację układu i opcje widoczności dla widoku szczegółów miejsca i selektora miejsc, ustaw właściwości placeChooserViewSetup i placeDetailsViewSetup elementu LocalContextMapView. Widok szczegółów miejsca można też ukryć automatycznie.

Ustawianie położenia selektora miejsc

Możesz ustawić pozycję układu wyboru miejsca podczas inicjowania elementu LocalContextMapView. Położenie układu zależy od kierunku dokumentu i różni się w zależności od tego, czy aplikacja jest przeznaczona od lewej do prawej (LTR) czy od prawej do lewej (RTL).

Dostępne są 3 opcje układu selektora miejsc:

  • INLINE_START ustawia selektor miejsca do wyświetlania na początku przepływu treści (po lewej stronie mapy LTR, po prawej dla RTL).
  • INLINE_END ustawia selektor miejsca do wyświetlania na końcu przepływu treści (po prawej stronie mapy LTR, po lewej stronie w przypadku RTL).
  • BLOCK_END ustawia selektor miejsca do wyświetlania na ekranie.

Jeśli ustawiasz położenie selektora miejsc na INLINE_START lub INLINE_END, zawsze musisz ustawić tę samą wartość w widoku szczegółów miejsca. Opcjonalnie możesz wyświetlić widok szczegółów miejsca w oknie informacyjnym. W przypadku BLOCK_END tryb układu widoku szczegółów miejsca ZAWSZE musi być ustawiony na INFO_WINDOW.

Lokalna biblioteka kontekstu elastycznie zmienia pozycję selektora na podstawie wyrenderowanego rozmiaru elementu LocalContextMapView. Domyślnie w większym rozmiarze LocalContextMapView na początku przepływu treści wyświetla się selektor miejsca (po lewej stronie mapy LTR, po prawej – RTL). W mniejszej postaci LocalContextMapView (np. na urządzeniu mobilnym) domyślnie zmienia się widok selektora miejsc u dołu mapy i wyświetla się jego szczegóły w oknie informacyjnym. Poziom powiększenia w przeglądarce ma wpływ na wymiary piksela, w którym zmienia się pozycja selektora z boku lub u dołu (próg zwiększa się proporcjonalnie wraz z poziomem powiększenia).

Do konfigurowania domyślnej pozycji selektora miejsca zalecamy używanie wywołań funkcjonalnych. Bezpośrednie zadeklarowanie tych wartości spowoduje zastąpienie wszystkich zmian układu elastycznego.

wyświetlanie selektora miejsc na początku przepływu treści;

Aby selektor miejsc wyświetlał się na początku przepływu treści (po lewej stronie mapy LTR, po prawej stronie RTL), ustaw position na INLINE_START zarówno w placeChooserViewSetup, jak i placeDetailsViewSetup, jak pokazano w tym przykładzie:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
});

Wyświetlanie selektora miejsc na końcu przepływu treści

Aby ustawić selektor miejsca tak, aby pojawiał się na końcu przepływu treści (po prawej stronie LTR, po lewej stronie RTL), ustaw position na INLINE_END w przypadku placeChooserViewSetup i placeDetailsViewSetup, jak pokazano w tym przykładzie:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
});

Wyświetlanie selektora miejsc na dole

Aby ustawić selektor miejsca do wyświetlania na dole mapy, ustaw position z placeChooserViewSetup na BLOCK_END, a layoutMode z placeDetailsViewSetup na INFO_WINDOW, jak pokazano w poniższym przykładzie:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'BLOCK_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {layoutMode: 'INFO_WINDOW'};
    }
  },
});

Ukrywam wybór miejsca

Element wyboru miejsca jest domyślnie widoczny. Aby ukryć selektor miejsca, ustaw layoutMode na HIDDEN, jak w tym przykładzie:

placeChooserViewSetup: {layoutMode: 'HIDDEN'},

Poniższy przykład pokazuje ukrycie opcji wyboru miejsca, gdy domyślna pozycja zmieni się na BLOCK_END:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  placeChooserViewSetup: ({defaultPosition}) => {
    if (defaultPosition === 'BLOCK_END') {
      return {layoutMode: 'HIDDEN'};
    }
  },
});

Wyświetlanie widoku szczegółów miejsca w oknie informacyjnym

Aby w oknie informacyjnym wyświetlać widok szczegółów miejsca, ustaw layoutMode na INFO_WINDOW, jak w tym przykładzie:

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

Możesz użyć tego ustawienia w połączeniu z dowolnym położeniem selektora (lewą, prawą lub u dołu).

Automatyczne ukrywanie widoku szczegółów miejsca

Widok szczegółów miejsca możesz ukryć programowo, wywołując właściwość hidePlaceDetailsView() w instancji LocalContextMapView, jak w tym przykładzie:

localContextMapView.hidePlaceDetailsView()

Domyślnie kliknięcie mapy powoduje ukrycie widoku szczegółów miejsca. Aby zapobiec temu domyślnemu działaniu, możesz ustawić opcję hidesOnMapClick w placeDetailsViewSetup na false.

// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: {hidesOnMapClick: false},
});

Aby ukryć okno z informacjami o miejscu tylko po kliknięciu mapy, możesz warunkowo ustawić wartość hidesOnMapClick, jak pokazano w poniższym przykładzie:

// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
  },
});

Ustawianie wewnętrznych opcji Map

Gdy masz instancję LocalContextMapView, możesz ustawić MapOptions w wewnętrznej instancji Map. Element Map zawarty w tagu LocalContextMapView obsługuje wszystkie te same opcje map co standardowa mapa interfejsu API JavaScript Map. Poniższy przykład pokazuje utworzenie nowej instancji LocalContextMapView i ustawienie kilku opcji w wewnętrznym narzędziu Map:

// Instantiate LocalContextMapView.
function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
  });

  // Set inner map options.
  localContextMapView.map.setOptions({
    center: pos,
    zoom: 14,
    mapTypeId: 'satellite',
  });
}