请按照以下步骤将 Local Context Library 添加到项目,并进行初始化,然后配置 Local Context 地图视图。
启用所需的 API 和 SDK
若要使用 Local Context Library,您必须启用 Maps JavaScript API 和 Places API。为此,请按照说明启用一个或多个 API 或 SDK。请注意,必须在 Google Cloud 控制台中针对同一项目启用这两个 API。
加载 Local Context Library
若要加载 Local Context Library,请像往常一样加载 Maps JavaScript API,并添加以下参数:
libraries=localContext
:用于加载 Local Context Library。v=beta
:使用此版本所需的参数。key
:包含您的 API 密钥。callback
:用于执行initMap()
函数。
以下示例展示了包含上述所有选项的脚本标记:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext&v=beta&callback=initMap">
</script>
创建新的 Local Context 地图视图
若要将 Local Context Library 添加到网页,请先创建一个 LocalContextMapView
实例,然后设置所需的属性:
element
- 应显示地图的div
元素(在本例中名为“map”)。placeTypePreferences
- Local Context Library 应返回的地点类型(最多 10 个)。maxPlaceCount
- 可显示的地点数量上限 (1 - 24)。locationRestriction
(可选)- 将地点搜索限制为特定位置。默认为地图视口。
有了 LocalContextMapView
实例后,您可以在内部 Map
实例上设置 MapOptions。LocalContextMapView
中包含的地图支持与标准 Maps JavaScript API 地图相同的所有地图选项。以下示例展示了如何创建新的 LocalContextMapView
实例,并在内部 Map
上设置几个选项:
TypeScript
let map: google.maps.Map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: [ { type: "restaurant" }, { type: "tourist_attraction" }, ], maxPlaceCount: 12, }); map = localContextMapView.map!; map.setOptions({ center: { lat: 51.507307, lng: -0.08114 }, zoom: 14, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: [ { type: "restaurant" }, { type: "tourist_attraction" }, ], maxPlaceCount: 12, }); map = localContextMapView.map; map.setOptions({ center: { lat: 51.507307, lng: -0.08114 }, zoom: 14, }); } window.initMap = initMap;
推迟加载 Local Context 数据
若要在初始化时推迟加载 Local Context 数据,您可以将 LocalContextMapView
maxPlaceCount
选项设置为 0。如果您想要等到用户准备好查看数据后再加载,使用这种方法会非常方便。准备好加载 Local Context 数据后,请将 maxPlaceCount
设置为 1 或更大的值。以下示例展示了如何在不加载 Local Context 数据的情况下初始化地图,然后设置 maxPlaceCount
以加载数据:
// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
});
//...
// Show places now.
localContextMapView.maxPlaceCount = 12;
对 Local Context 界面的显示进行切换
您可以将 LocalContextMapView
maxPlaceCount
选项设置为 0 来切换 Local Context 界面元素。如需再次显示 Local Context 界面,请将 maxPlaceCount
设置为 1 或更大的值。
设置地图最小尺寸
Local Context Library 会根据 LocalContextMapView
的渲染大小相应调整显示界面。LocalContextMapView
支持的最小尺寸为:
- 300 像素 x 480 像素(纵向)
- 480 像素 x 380 像素(横向)
如果包含 LocalContextMapView
的元素的尺寸下降到支持的最小尺寸以下,系统不会显示 Local Context Library 元素(包括地点选择器和地图注点)。浏览器缩放级别会影响支持的最小尺寸;例如,如果浏览器窗口缩放到 200%,支持的最小尺寸为 600 x 960(纵向)和 960 x 760(横向)。
CSS 建议
Local Context Library DOM 中的 CSS 类不属于公共 API,并且不支持在 Local Context Library DOM 中设置元素的样式、修改元素或选择元素。我们强烈建议遵循以下准则,以免 DOM 样式发生冲突,并确保 Local Context Library 地图视图正确显示:
- 请勿使用 Local Context Library CSS 类,因为这些类可能会在没有通知的情况下更改。
- 请勿在 Local Context Library DOM 内设置元素的样式、修改元素或选择元素。
如果您使用的 CSS 框架可执行此类修改,也许可以解决样式冲突问题。
例如,如果您要将整个页面 box-sizing
更改为 border-box
,请执行以下操作:
- 使用
box-sizing
替换功能,将<html>
元素设置为border-box
。 - 对于包含 Local Context Library 地图视图的元素,请使用
box-sizing: initial
。 - 对于所有其他元素,请使用
box-sizing: inherit
。
这可确保 Local Context Library DOM 使用低特异性选择器将 box-sizing
重置为标准默认值。
代码如下所示:
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.container-for-google-maps {
box-sizing: initial;
}