设置 Local Context 选项和地图选项

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

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

指定地点类型

您最多可以指定 10 种 Local Context Library 应返回的地点类型。使用 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。此值可以大于或小于地图视口大小。查看示例

启用路线

若要在地图上启用路线,请为 LocalContextMapView 设置 directionsOptions 属性,并传递起点的 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 将地点选择器设置为在页面底部(对于 LTR 和 RTL 是相同的)显示。

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

Local Context Library 会根据 LocalContextMapView 的渲染大小相应地更改地点选择器位置。默认情况下,在较大的 LocalContextMapView 中,地点选择器显示在内容流的起始位置(对于 LTR,位于地图左侧;对于 RTL,位于地图右侧)。在较小的 LocalContextMapView 中(例如,在移动设备上),默认设置会更改为在地图底部显示地点选择器,并在信息窗口中显示地点详情。浏览器缩放级别会影响地点选择器位置在侧边和底部之间转变时的像素尺寸(阈值会随着缩放级别按比例提高)。

建议您通过函数调用来配置地点选择器的默认位置。直接声明这些值将替换任何自适应布局更改。

在内容流的起始位置显示地点选择器

若要将地点选择器设置为在内容流的起始位置(对于 LTR,位于地图左侧;对于 RTL,位于地图右侧)显示,请将 placeChooserViewSetupplaceDetailsViewSetupposition 均设置为 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',
  });
}