本部分介绍了您可以在 LocalContextMapView
实例上设置的选项,以及 LocalContextMapView
中所包含的内部 Map
。创建新的 LocalContextMapView
实例时,您最多可以指定 10 种地点类型,以及要返回的地点数量上限(最多 24 个)。内部 Map
支持与标准 Maps JavaScript API Map
相同的所有 MapOptions。
Local Context Library 完成初始化后,您可以随时更新 Local Context 搜索属性。更新 maxPlaceCount
、placeTypePreferences
、locationRestriction
或 locationBias
中的任何一项都可能会自动触发新搜索。
指定地点类型
您最多可以指定 10 种 Local Context Library 应返回的地点类型。使用 placeTypePreferences
属性并传递一个或多个地点类型,即可指定地点类型,如以下示例所示:
placeTypePreferences: ['restaurant', 'cafe']
地点类型加权
您可以选择为每种指定类型分配相对权重,这会提高加权值较高的类型的展示频率。权重是一个可选的高级参数,应仅根据需要使用。如果省略此参数,则默认权重由 Local Context Library 确定,可能会随着时间推移而发生变化和不断完善。
您可以使用 weight
属性为每个属性分配相对权重。以下示例展示了如何对指定地点类型进行加权,以便返回的 restaurant
和 cafe
结果是 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
设置位置限制
默认情况下,系统将搜索区域界定为地图视口大小。您可以指定一组边界,将搜索结果限制在更大或更小的区域。为此,请将 LocalContextMapView
的 locationRestriction
属性设置为所需的 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};
设置布局和可见性
您可为地点详情视图和地点选择器设置初始布局位置和可见性选项,只需设置 LocalContextMapView
的 placeChooserViewSetup
和 placeDetailsViewSetup
属性即可。您也能以编程方式隐藏地点详情视图。
设置地点选择器的布局位置
您可以在初始化 LocalContextMapView
时设置地点选择器的布局位置。布局位置是相对于文档方向而言的,具体取决于应用方向是从左到右 (LTR) 还是从右到左 (RTL)。
地点选择器有以下三个布局选项:
INLINE_START
将地点选择器设置为在内容流的起始位置(对于 LTR,位于地图左侧;对于 RTL,位于地图右侧)显示。INLINE_END
将地点选择器设置为在内容流的结束位置(对于 LTR,位于地图右侧;对于 RTL,位于地图左侧)显示。BLOCK_END
将地点选择器设置为在页面底部(对于 LTR 和 RTL 是相同的)显示。
将地点选择器位置设置为 INLINE_START
或 INLINE_END
时,必须始终将地点详情视图的位置设置为相同的值。您可以选择将地点详情视图设置为在信息窗口中显示。对于 BLOCK_END
,地点详情视图布局模式必须始终设置为 INFO_WINDOW
。
Local Context Library 会根据 LocalContextMapView
的渲染大小相应地更改地点选择器位置。默认情况下,在较大的 LocalContextMapView
中,地点选择器显示在内容流的起始位置(对于 LTR,位于地图左侧;对于 RTL,位于地图右侧)。在较小的 LocalContextMapView
中(例如,在移动设备上),默认设置会更改为在地图底部显示地点选择器,并在信息窗口中显示地点详情。浏览器缩放级别会影响地点选择器位置在侧边和底部之间转变时的像素尺寸(阈值会随着缩放级别按比例提高)。
建议您通过函数调用来配置地点选择器的默认位置。直接声明这些值将替换任何自适应布局更改。
在内容流的起始位置显示地点选择器
若要将地点选择器设置为在内容流的起始位置(对于 LTR,位于地图左侧;对于 RTL,位于地图右侧)显示,请将 placeChooserViewSetup
和 placeDetailsViewSetup
的 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,位于地图左侧)显示,请将 placeChooserViewSetup
和 placeDetailsViewSetup
的 position
均设置为 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'};
}
},
});
在底部显示地点选择器
若要将地点选择器设置为在地图底部显示,请将 placeChooserViewSetup
的 position
设置为 BLOCK_END
,并将 placeDetailsViewSetup
的 layoutMode
设置为 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
实例上设置 MapOptions。LocalContextMapView
中所包含的 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',
});
}