Настройки локального контекста и карты

В этом разделе рассмотрены настройки, которые вы можете применить к экземпляру LocalContextMapView и содержащемуся в этом экземпляре LocalContextMapView объекту Map. При создании нового экземпляра LocalContextMapView можно указать до 10 типов мест, а также максимальное количество мест в ответе (до 24). Объект Map вложенной карты поддерживает те же параметры MapOptions, что и стандартный объект Map в Maps JavaScript API.

Настройки поиска локального контекста можно изменить в любое время после инициализации библиотеки LocalContext. Обновление любой из этих настроек (maxPlaceCount, placeTypePreferences, locationRestriction или locationBias) может привести к автоматическому срабатыванию нового поискового запроса.

Определение типов мест

Вы можете определить до 10 типов мест, которые должны возвращаться в ответ на запросы к библиотеке LocalContext. Это можно сделать с помощью свойства placeTypePreferences, передав ему один или несколько типов мест, как показано в примере ниже.

placeTypePreferences: ['restaurant', 'cafe']

Взвешивание типов мест

При желании вы можете назначить относительный вес каждому указанному типу. Чем выше значение веса, тем чаще в результатах поиска будут появляться места соответствующего типа. Вес — необязательный продвинутый параметр, который следует использовать только по мере необходимости. Если он опущен, библиотека LocalContext задаст веса по умолчанию, а их значения будут меняться со временем для улучшения результатов поиска.

Задать относительный вес для каждого из свойств с помощью атрибута weight. В примере ниже веса присвоены так, чтобы мест restaurant и cafe в результатах поиска было в два раза больше, чем primary_school.

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

Результаты будут различаться в зависимости от того, есть ли места того или иного типа в конкретном районе. Например, если вы присвоите коэффициент 10 типу shopping_mall, он не будет оказывать никакого эффекта на результаты поиска, если в районе нет торговых центров.

Ограничение по количеству мест

Чтобы установить ограничение по количеству мест, которое должна возвращать библиотека LocalContext (не более 24), используйте свойство maxPlaceCount, как показано в примере ниже.

maxPlaceCount: 12

Ограничение области карты

По умолчанию поиск ведется в видимой области карты. Вы можете самостоятельно задать границы, в пределах которых нужно вести поиск. Для этого задайте для свойства locationRestriction объекта LocalContextMapView желаемое значение LatLngBounds. Это значение может быть больше или меньше области просмотра. Пример

Включение маршрутов

Чтобы включить маршруты на карте, настройте свойство directionsOptions объекта LocalContextMapView, передав ему литерал объекта LatLng для исходной точки (конечной точкой будет выбранное в текущий момент место). Если не передать начальную точку, маршруты будут отключены. Смотрите, как установить исходную точку в примере ниже.

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

Размер области просмотра карты, определяемый границами карты и уровнем масштабирования, напрямую влияет на максимальное расстояние от исходной точки. Например, если ширина области просмотра эквивалентна расстоянию в 100 км, то объекты на карте будут появляться в радиусе не более 50 км от исходной точки. Чтобы приложение не возвращало нелогично длинные пешеходные маршруты:

  • Отключите пешие маршруты для карт мелкого масштаба (обычно это уровень масштабирования менее 16).
  • Определите более узкие границы в параметре locationRestriction: так объекты на карте не будут отображаться за пределами этой зоны.

Изменение пункта отправления

Вы можете изменить значение свойства directionsOptions в любой момент жизненного цикла объекта LocalContextMapView. В примерах ниже показано, как задать новое значение для параметра directionsOptions.

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

или

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

Настройка макета и видимости объектов

Вы можете настроить исходный макет и видимость сведений о месте и средства выбора мест, задав свойства placeChooserViewSetup и placeDetailsViewSetup для объекта LocalContextMapView. Скрыть сведения о месте можно также программным способом.

Расположение средства выбора мест на макете

Выбрать положение средства выбора места на макете можно при инициализации LocalContextMapView. Место в макете зависит от направления текста в вашем приложении – слева направо (LTR) или справа налево (RTL).

Возможны три варианта расположения инструмента:

  • INLINE_START – в НАЧАЛЕ страницы (слева от карты для языков LTR и справа для языков RTL).
  • INLINE_END – в КОНЦЕ страница (справа от карты для языков LTR и слева для языков RTL).
  • BLOCK_END – ВНИЗУ страницы (этот вариант одинаков для обоих направлений письма).

Устанавливая средство выбора места в позицию INLINE_START или INLINE_END, обязательно проследите за тем, чтобы для блока сведений о месте была выбрана та же позиция. При желании можно настроить показ сведений о месте в информационном окне (INFO_WINDOW). Если выбрана позиция BLOCK_END, то сведения о месте должны ВСЕГДА отображаться в информационном окне.

Библиотека локального контекста адаптивно подстраивает блок со средством выбора мест в зависимости от отрисованного размера LocalContextMapView. В более крупных окнах LocalContextMapView оно появляется по умолчанию в начале страницы (слева от карты для языков LTR и справа для RTL). В более мелких окнах LocalContextMapView (например, на мобильных устройствах) местом по умолчанию будет нижняя часть экрана, а сведения о местах будут появляться только в информационном окне. Уровень масштабирования браузера влияет на то, при каких размерах окна (в пикселях) выбирается то или иное положение. Чем выше уровень масштабирования, тем выше пороговое значение.

Для настройки расположения средства выбора мест по умолчанию рекомендуем использовать функциональные вызовы: явное объявление переопределит любые адаптивные изменения макета.

Средство выбора мест в начале страницы

Чтобы поместить средство выбора мест в начало страницы (слева от карты для языков LTR или справа для RTL), установите для переменной position значение INLINE_START в объектах placeChooserViewSetup и placeDetailsViewSetup, как показано в следующем примере:

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'};
    }
  },
});

Средство выбора мест в конце страницы

Чтобы поместить средство выбора мест в конец страницы (справа от карты для языков LTR или слева для RTL), установите для переменной position значение INLINE_END в объектах placeChooserViewSetup и placeDetailsViewSetup, как показано в следующем примере:

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'};
    }
  },
});

Средство выбора мест внизу страницы

Чтобы поместить средство выбора мест вниз карты, установите для переменной position в объекте BLOCK_END значение placeChooserViewSetup, а для переменной layoutMode в объекте INFO_WINDOW – значение placeDetailsViewSetup.

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'};
    }
  },
});

Скрытие инструмента выбора

Средство выбора мест отображается по умолчанию. Чтобы скрыть его, задайте для layoutMode значение HIDDEN, как показано в этом примере:

placeChooserViewSetup: {layoutMode: 'HIDDEN'},

В следующем примере показано, как скрыть средство выбора места, если позиция по умолчанию изменена на BLOCK_END:

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

Показ сведений о месте в информационном окне

Чтобы сведения о месте отображались в информационном окне, установите для параметра layoutMode значение INFO_WINDOW, как показано в следующем примере:

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

Этот параметр можно использовать в сочетании с любой позицией средства выбора места (слева, справа или внизу).

Скрытие сведений о месте программным способом

Показ сведений о месте можно скрыть программно, вызвав метод hidePlaceDetailsView() для экземпляра LocalContextMapView, как показано в следующем примере.

localContextMapView.hidePlaceDetailsView()

По умолчанию нажатие на карту скрывает сведения о месте. Чтобы предотвратить это поведение интерфейса по умолчанию, установите для параметра hidesOnMapClick в окне placeDetailsViewSetup значение false.

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

Чтобы скрывать информационное окно только при нажатии на карту, задайте условия выбора значений hidesOnMapClick, как показано в следующем примере.

// 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'};
  },
});

Настройка вложенного объекта Map

После получения экземпляра LocalContextMapView вы можете задать параметры карты для вложенного экземпляра Map. Карта Map внутри объекта LocalContextMapView поддерживает те же параметры, что и стандартная карта в Maps JavaScript API. В следующем примере показано, как создать новый экземпляр LocalContextMapView и задать несколько параметров для вложенного объекта 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',
  });
}