在 Google 地图中使用新的 AdvancedMarkerElement 方法无法看到云地图样式

Question

我已将代码迁移为使用

AdvancedMarkerElement

，要求之一是为地图提供 mapId 并在 Google Cloud 中创建关联样式。

我已遵循他们的教程https://developers.google.com/maps/documentation/cloud-customization#cloud_tooling，我可以验证以下内容是否正确：

• 我有一个自定义地图样式并且已发布
• 我有一个地图 ID，它与自定义样式相关联
• 我已将具有上述 id 的

  map_ids

  属性添加到我用来加载 api 的

  @googlemaps/js-api-loader

• ID 会应用到地图初始化代码中，如下所示：

...

import { Loader } from '@googlemaps/js-api-loader'

export default ({ store, $config }, inject) => {
  const loader = new Loader({
    libraries: ['places', 'geometry'],
    apiKey: $config.googleMapsApiKey,
    mapIds: ['myMapId'],
  })
  inject(
    'google',
    loader.load().catch((err) => {
      console.error(err)
    })
  )
}

...

mapHandle.value = new googleMapsApi.value.Map(map.value as HTMLDivElement, {
  center: new googleMapsApi.value.LatLng(defaultCoordinates),
  disableDefaultUI: true,
  draggableCursor: 'default',
  gestureHandling: 'none',
  keyboardShortcuts: false,
  mapId,
  ...mapOptions,
})
...

不幸的是，地图仍然显示默认的 Google 样式，并且在网络选项卡中我可以看到

https://maps.googleapis.com/maps/api/mapsjs/mapConfigs:batchGet?map_ids=myMapId&language=en-US&region=US&alt=protojson&major_version=56&minor_version=8

嵌套响应对象内的某处显示隐藏的错误消息

"Map ID not found. Map capabilities are currently enabled but this behavior may change in a future release."

我是否遗漏了一些显而易见的东西？

Answer 1

这太疯狂了……迷失了半天。事实证明，谷歌为每张新地图创建了一个唯一的 ID，而我使用的只是我自己创建的地图名称。

因此，当您在地图管理控制台中时，在地图名称旁边的表格中，有实际的 16 位长的地图 ID。此外，不需要在 JS 加载器中传递 mapId 即可实现此功能。