---
title: "地图样式"
description: "使用 JSON 规则、云端地图 ID 和颜色模式设置交互式地图与静态地图的样式。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-maps/guides/map-styling"
last_updated: "2026-08-11T09:33:14.185Z"
---

Google 地图支持两种样式设置方式：传统 JSON 样式和基于云端的地图 ID。两者都可与 Nuxt Scripts 配合使用。静态地图使用自身的 `style` 或 `mapId` 属性。

## JSON 样式

使用带有 JSON 样式数组的 `mapOptions.styles` prop。Google 的 [JSON 样式参考](https://developers.google.com/maps/documentation/javascript/style-reference)介绍了受支持的功能、元素和样式器。

这些样式适用于交互式地图。要匹配 [`ScriptGoogleMapsStaticMap`](/scripts/google-maps/api/static-map) 占位符，请同时将相同的数组传递给其 `style` prop。

<callout color="amber">

JSON `styles` 不能与 `ScriptGoogleMapsMarker` 结合使用。当设置 `styles` 但未显式设置 `mapId` 时，Nuxt Scripts 会隐藏其备用地图 ID，而 Google 的 [`AdvancedMarkerElement` 要求使用地图 ID](https://developers.google.com/maps/documentation/javascript/advanced-markers/start)。如果地图包含标记，请改用[基于云的地图 ID](#cloud-based-map-ids)。

</callout>

```vue
<script setup lang="ts">
const mapOptions = {
  styles: [
    {
      elementType: 'labels',
      stylers: [{ visibility: 'off' }, { color: '#f49f53' }],
    },
    {
      featureType: 'landscape',
      stylers: [{ color: '#f9ddc5' }, { lightness: -7 }],
    },
    {
      featureType: 'road',
      stylers: [{ color: '#813033' }, { lightness: 43 }],
    },
    {
      featureType: 'water',
      stylers: [
        { color: '#1994bf' },
        { saturation: -69 },
        { gamma: 0.99 },
        { lightness: 43 },
      ],
    },
    {
      featureType: 'poi.park',
      stylers: [{ color: '#645c20' }, { lightness: 39 }],
    },
  ],
}
</script>

<template>
  <ScriptGoogleMaps :map-options="mapOptions" />
</template>
```

## 基于云的地图 ID

Google 的[地图样式设置](https://developers.google.com/maps/documentation/cloud-customization)功能允许你在 Google Cloud 控制台中创建和管理样式，然后通过地图 ID 应用它们。

```vue
<template>
  <ScriptGoogleMaps
    :map-options="{
      mapId: 'YOUR_MAP_ID',
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 12,
    }"
  />
</template>
```

<callout color="amber">

JSON `styles` 和 `mapId` 不能同时使用。当两者都被显式提供时，当前组件会同时传递这两个值；Google 会通过地图 ID 控制样式，而不是应用 JSON 样式。由于 `ScriptGoogleMapsMarker` 使用 `AdvancedMarkerElement`，基于云的地图 ID 是为包含标记的地图设置样式的方式。

</callout>

<callout type="info">

当省略 `mapId` 时，Nuxt Scripts 会提供 Google 的 `DEMO_MAP_ID`，以便高级标记能够正常渲染。Google 仅将该 ID 用于测试；请在生产环境中创建并传入你自己的地图 ID。

</callout>

## 深色模式 / 色彩模式

根据用户的色彩模式偏好自动切换地图样式。提供一个包含亮色和暗色地图 ID 的 `mapIds` 对象：

```vue
<template>
  <ScriptGoogleMaps
    :map-ids="{ light: 'LIGHT_MAP_ID', dark: 'DARK_MAP_ID' }"
    :map-options="{
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 12,
    }"
  />
</template>
```

如果你在 Google Cloud Console 中使用亮色和暗色配色方案设置了一个单独的 Map ID，请将两个键都指向同一个 id，地图将自动应用 Google 的 `colorScheme`：

```vue
<template>
  <ScriptGoogleMaps
    :map-ids="{ light: 'YOUR_MAP_ID', dark: 'YOUR_MAP_ID' }"
    :map-options="{
      center: { lat: -33.8688, lng: 151.2093 },
      zoom: 12,
    }"
  />
</template>
```

<callout color="amber">

Google Maps 将 `mapId` 和 `colorScheme` 都视为仅初始化选项。切换色彩模式会拆除并重新创建基础 `Map` 实例；Google 不支持在不重新渲染的情况下更改这些选项。该组件会保留用户的平移/缩放状态，并自动将子组件（标记、信息窗口、覆盖层）重新挂载到新的地图上。

如果你通过暴露的 `map` 引用以命令式方式创建资源（而不是通过子组件），请监听 `@ready` 事件；每次重新初始化后它都会再次触发，以便你将这些资源重新附加到新的地图实例上。

</callout>

如果已安装，它会自动检测 `@nuxtjs/color-mode`。你也可以通过 `colorMode` 属性手动控制它：

```vue
<script setup lang="ts">
const isDark = ref(false)
</script>

<template>
  <ScriptGoogleMaps
    :map-ids="{ light: 'LIGHT_MAP_ID', dark: 'DARK_MAP_ID' }"
    :color-mode="isDark ? 'dark' : 'light'"
  />
  <button @click="isDark = !isDark">
    切换深色模式
  </button>
</template>
```

查看[标记和信息窗口](/scripts/google-maps/guides/markers-and-info-windows)了解如何将样式化地图与自定义标记内容结合使用。