设置本地上下文和地图选项

本部分介绍了您可以对 LocalContextMapView 实例设置的选项,以及 LocalContextMapView 包含的内部 Map。创建新的 LocalContextMapView 实例时,您最多可以指定 10 种类型的地点,以及要返回的最大地点数(最多 24 个)。内部 Map 支持所有与标准 Maps JavaScript API Map 相同的 MapOptions

Local Context Library 初始化后,您可以随时更新 Local Context 搜索属性。更新 maxPlaceCountplaceTypePreferenceslocationRestrictionlocationBias 中的任何一项可能会自动触发新搜索。

指定地点类型

您最多可以指定 Local Context Library 应返回的 10 种地点类型。使用 placeTypePreferences 属性并传递一个或多个地点类型,以指定地点类型,如以下示例所示:

placeTypePreferences: ['restaurant', 'cafe']

地点类型加权

您可以视需要为每个指定的类型分配相对权重,这会使得权重值较高的类型更频繁地显示。权重是一个可选的高级参数,应仅在需要时使用。如果省略此参数,Local Context Library 将确定默认权重,而这些权重可能会随着时间发生变化和提升。

您可以使用 weight 属性为每个属性分配相对权重。以下示例展示了对指定地点类型进行加权,返回的 restaurantcafe 结果是 primary_school 的两倍:

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

结果因特定地点类型是否存在于特定区域而异。例如,为 shopping_mall 指定 10 的权重将不会在该区域存在任何购物中心而不起作用。

设置地点数量上限

如需设置 Local Context Library 应返回的最大地点数(最多 24 个),请使用 maxPlaceCount 属性,如下所示:

maxPlaceCount: 12

设置位置限制

默认情况下,系统将搜索区域界定为地图视口大小。您可以指定一组边界,以将搜索结果限制在较大或较小的区域。为此,请将 LocalContextMapViewlocationRestriction 属性设置为所需的 LatLngBounds。此值可以大于或小于地图视口。查看示例

启用路线

如需在地图上启用路线,请设置 LocalContextMapViewdirectionsOptions 属性,并传递出发地的 LatLng 对象字面量(端点由当前选择的地点决定)。如果起点没有传递,路线就会停用。以下示例展示了如何设置出发地,以便在地图上启用步行路线:

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

地图视口的大小(由地图边界缩放级别定义)会直接影响从指定的原点返回的距离。例如,如果视口设置为显示 100 英里宽的区域,地图注点可能会显示在距离原点 50 英里的地方。为了确保应用以合理的距离返回步行路线,您可以:

  • 停用较低缩放级别的步行路线(通常低于缩放级别 16)。
  • 使用较小的边界区域定义 locationRestriction。这样可使地图注点不显示在限制区域之外的任何位置。

更改路线出发地

LocalContextMapView 的生命周期内,您可以随时更改 directionsOptions 属性的值。以下示例展示了如何为 directionsOptions 设置新值:

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

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

设置布局和可见性

您可以通过设置 LocalContextMapViewplaceChooserViewSetupplaceDetailsViewSetup 属性,为地点详情视图和地点选择器设置初始布局位置和可见性选项。您也可以以编程方式隐藏地点详情视图。

设置地点选择器布局位置

初始化 LocalContextMapView 时,您可以设置地点选择器的布局位置。布局位置是相对于文档方向而言的,并且取决于应用是从左到右 (LTR) 还是从右到左 (RTL)。

地点选择器有三种布局选项:

  • INLINE_START 设置地点选择器,使其显示在内容流的起始位置(对于 LTR,位于左侧;对于 RTL,位于右侧)。
  • INLINE_END 将地点选择器设置为在内容流的结束位置显示(在 LTR 的右侧,在 RTL 的左侧)。
  • BLOCK_END 用于将地点选择器设置为在网页的 BOTTOM 处显示(LTR 和 RTL 均如此)。

将地点选择器位置设置为 INLINE_STARTINLINE_END 时,必须始终将地点详情视图的位置设置为相同的值。您可以选择将地点详情视图设置为在信息窗口中显示。对于 BLOCK_END,地点详情视图布局模式必须始终设置为 INFO_WINDOW

Local Context Library 会根据 LocalContextMapView 的呈现大小以自适应方式更改地点选择器位置。默认情况下,在较大的 LocalContextMapView 中,地点选择器会显示在内容流的开头(对于 LTR,在地图左侧;在 RTL 右侧)。在较小的 LocalContextMapView(例如,在移动设备上)中,默认设置更改为在地图底部显示地点选择器,并在信息窗口中显示地点详情。浏览器缩放级别会影响像素选择器在位置和一侧之间移动的像素尺寸(阈值会随缩放级别按比例增加)。

建议使用函数调用来配置地点选择器的默认位置。直接声明这些值将覆盖所有自适应布局更改。

在内容流开始时显示地点选择器

如需将地点选择器设置为显示在内容流的开头(对于 LTR,位于地图左侧;对于 RTL,位于右侧);对于 placeChooserViewSetupplaceDetailsViewSetup,请将 position 设置为 INLINE_START,如以下示例所示:

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),请将 placeChooserViewSetupplaceDetailsViewSetupposition 均设置为 INLINE_END,如以下示例所示:

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

在底部显示地点选择器

如需将地点选择器设置为显示在地图底部,请将 placeChooserViewSetupposition 设置为 BLOCK_END,并将 placeDetailsViewSetuplayoutMode 设置为 INFO_WINDOW,如以下示例所示:

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

您可以将此设置与任何地点选择器位置(左侧、右侧或底部)结合使用。

以编程方式隐藏地点详情视图

您可以通过在 LocalContextMapView 实例上调用 hidePlaceDetailsView(),以编程方式隐藏地点详情视图,如以下示例所示:

localContextMapView.hidePlaceDetailsView()

默认情况下,点击地图将隐藏地点详情视图。您可以将 placeDetailsViewSetup 中的 hidesOnMapClick 选项设置为 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 实例上设置 MapOptionsLocalContextMapView 包含的 Map 支持所有与标准 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',
  });
}