如需迁移现有的 Maps JavaScript API 实现以使用 Local Context Library,请按以下步骤操作:
- 创建一个
LocalContextMapView
实例,并使用此实例访问内部Map
。 - 更新
script
标记,以包含libraries=localContext
和v=beta
参数。 - 移除旧的
google.maps.Map
声明 - 合并自定义地图样式与 Local Context 地图样式。如果您尚未定义任何自定义地图样式,可以跳过此步骤。
当前的 Maps JavaScript API 代码可能如下所示:
const map = new google.maps.Map(
document.querySelector('#map-container'),
/* map options */
);
如需迁移到 Local Context Library,请将之前的代码替换为以下代码:
// Create a new LocalContextMapView instance.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map-container'),
placeTypePreferences: ['restaurant', 'cafe'],
maxPlaceCount: 12,
});
// Access the inner map and set map options.
const map = localContextMapView.map;
map.setOptions(/* map options */);
更新 script
标记,以包含 libraries=localContext
和 v=beta
参数:
<script src="https://maps.googleapis.com/maps/api/js?
libraries=localContext&
v=beta&
key=YOUR_API_KEY&
callback=initMap"
async>
</script>
如果您已定义自定义样式,则必须将其与 Local Context Library 地图样式合并。了解详情。