将地图迁移到 LocalContextMapView

如需迁移现有的 Maps JavaScript API 实现以使用 Local Context Library,请按以下步骤操作:

  1. 创建一个 LocalContextMapView 实例,并使用此实例访问内部 Map
  2. 更新 script 标记,以包含 libraries=localContextv=beta 参数。
  3. 移除旧的 google.maps.Map 声明
  4. 合并自定义地图样式与 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=localContextv=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 地图样式合并。了解详情