在部分城市,您可以在现有样式中预览增强的道路级详细信息,例如真实的道路宽度、人行道、车道标记和其他地图项,缩放级别为 17 级或更高级别。您必须为每个样式编辑器会话启用预览。这些道路细节地图功能仅在支持道路级详情的 SDK 或 API 上可见。如需在应用中应用这些样式,您必须将关联的 SDK 或 API 更新到支持道路级详细信息的版本。如需详细了解 API 和 SDK 版本,请参阅 Google Maps Platform 的路线级详细信息。
[null,null,["最后更新时间 (UTC):2025-08-31。"],[[["\u003cp\u003eCustomize the appearance of map elements, such as color or size, at different zoom levels for a dynamic and detailed map experience.\u003c/p\u003e\n"],["\u003cp\u003eOverride inherited styles and feature-specific styles by applying zoom-level customizations within the style editor.\u003c/p\u003e\n"],["\u003cp\u003eCustomizations made at a specific zoom level automatically apply to that level and all subsequent higher zoom levels.\u003c/p\u003e\n"],["\u003cp\u003eEasily remove zoom-level customizations by clearing the associated checkbox, reverting the element to its inherited style.\u003c/p\u003e\n"],["\u003cp\u003eCreate or modify map styles with zoom-level customizations through the Google Cloud Console's style editor, saving and publishing changes as needed.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/android-sdk/cloud-customization/zoom-levels \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/cloud-customization/zoom-levels \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/cloud-customization/zoom-levels \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/maps-static/cloud-customization/zoom-levels \"View this page for the Web Service platform docs.\")\n\n\u003cbr /\u003e\n\n**Availability**: This feature is visible on Android, iOS, JavaScript, and\nMaps Static.\n\nBetter tailor your map to the needs of your users by highlighting features\nat the zoom level that the map is viewed at. For example, you can highlight\nPOIs or roads once viewers have zoomed into a particular location of interest.\n\nYou can style map feature elements to appear the same at all zoom levels on a\nmap, or for some elements, you can create different styles for different zoom\nlevels.\n\nNot all features allow you to customize zoom levels. Map feature elements\nthat you can set zoom-level styling on have a diamond icon to the right.\n\nUnderstand zoom-level styling\n\nZoom levels go from 0, the most zoomed out, showing the world, to 22, the\nmost zoomed in, showing a small detailed part of the map. A *keyzoom* is a\nzoom level where you want to start a new style.\n\nWhen you style map features at different zoom levels, that style applies to\nall higher zoom levels (more zoomed in) until another zoom level style is\nreached. Zoom level 0 is always added with the current style.\n\nFor example, if you set styles at zoom levels 5 and 10:\n\n- The zoom level 5 style applies to zoom levels 5-9.\n- The zoom level 10 style applies to zoom levels 10-22.\n- Zoom levels 0-4 keep the current style.\n\nWhen you customize a zoom-level style for a map feature, it overrides any\ncustom styles on the overall map feature.\n| **Note:** Very few map features are shown at all zoom levels. The styles you define are only applied at zoom levels where the map feature is visible.\n\nUnderstand zoom level transitions for 3D maps\n\nWhen you tilt a 3D map and transition between zoom levels, you may see\ntransition colors outside of your set zoom-level styles.\n\nFor example, if you set the zoom-level styles as follows:\n\n- For zoom level 10, water fill color = black.\n- For zoom level 11, water fill color = white.\n\nThe water fill color may appear as gray when transitioning between the two zoom\nlevels, as shown in the following figure:\n\nCustomize different zoom levels\n\n1. In the Cloud console, go to [**Map Styles**](https://console.cloud.google.com/project/_/google/maps-apis/studio/styles),\n and select a project, if needed.\n\n2. Create or open a map style, and select **Customize** .\n For details, see [Create a map style](/maps/documentation/ios-sdk/cloud-customization/map-styles#create-style).\n\n3. From the **Map Features** pane, select a map feature to customize. A panel\n opens showing the elements you can customize.\n\n4. Next to the element to which you want to add zoom-level styling, select\n the zoom diamond to the right to open the zoom-level styling panel.\n\n5. Next to **Current Zoom**, select the zoom level you want to\n customize. The preview map adjusts to that zoom level.\n\n | **Note:** The zoom-level styling panel shows all the available default basemap color values for their respective keyzooms if the map feature has not yet been customized.\n6. Select **Add Keyzoom**. The zoom-level styling pane adds the new keyzoom at\n the selected zoom level and shows the respective default basemap value.\n\n7. Style this zoom level and any other zoom levels as needed.\n\n | **Note:** Zoom-level styling applies to the selected zoom level and higher (more zoomed in). So, in this case, **Fill color** is black (the current style set for the element), from zoom level 12 to 22, blue from zoom levels 0 (the world) to 9, and a lighter blue from zoom levels 10 to 11.\n8. To set another zoom level, change the **Current Zoom** and select\n **Add Keyzoom** again to add another zoom level to the list. Continue\n adding and setting zoom level styles until you are done.\n\n9. When you're finished, close the zoom-level styling pane.\n\nOverwrite the default basemap color values for an element\n\nTo overwrite all default basemap color values for an element across zoom levels,\nfirst style the element in the element pane. When you add keyzooms, the keyzoom\nuses the color you set for the element instead of the default basemap color.\n\nSave and publish zoom-level styling\n\n1. To save your map styling changes, select **Save**.\n\n2. To make your changes live for the map IDs associated with your map style,\n select **Publish**.\n\nRemove a zoom level style\n\n1. From the **Map Features** pane, select a customized map feature.\n\n2. Next to a style element, select the diamond on the right.\n Elements with custom zoom-level styling show a solid blue diamond.\n\n3. In the keyzoom panel, select the minus icon to\n delete a zoom level.\n\nRemove all zoom level styles\n\nIf you want to remove all custom styling from a map feature element, you can do one of the following:\n\n- In the **elements panel** , select the remove minus icon next to the element name.\n- In the **keyzoom panel** , select the restart_alt reset icon next to the element name.\n\nPreview road level details\n\nYou can preview enhanced road level details at zoom\nlevels 17+ on your existing styles such as realistic road widths, sidewalks,\nlane markings and other features in select cities. You must enable the preview\nfor each style editor session. These road detail map features are only visible\non the SDKs or APIs that support road level details. To apply them in your app,\nyou must update the associated SDK or API to the version that supports road\nlevel details. For more information about the API and SDK versions, see [Road\nlevel details for Google Maps Platform](/maps/comms/msa-road-level-details).\n\nTo enable the road detail preview, do the following:\n\n1. In the Google Cloud console, go to **Map Styles**.\n\n2. Select an existing style or **Create a style**.\n\n3. Click **Customize**.\n\n4. In the style editor, click **Road detail preview**.\n\n5. In the preview dialog, toggle **Road detail** to on.\n\nFor details on which road level details you can style, see [What you can style\non the map](/maps/documentation/ios-sdk/cloud-customization/taxonomy).\n\nAdd zoom level styles to soften style transition for zoom levels 17+\n\nAt zoom levels 17+ with road level details enabled, Road map features disappear\nand become the Surface map feature instead. As you zoom in, any styled elements\nthat apply to the Surface map feature appear and replace the Road map features\nand styles.\n\nTo make the transition between the map feature styles smoother, you can add zoom\nlevel styles to lock in your style colors between specific zoom levels. You can\nuse zoom level styles to also control when to smoothly transition to a new style\ncolor.\n\nFor example, at zoom level 16, the listed map features are styled as follows:\n\n- Arterial is red.\n- Highway is blue.\n- Local is yellow.\n- Surface is beige.\n\nWhen you zoom in to zoom level 17, the arterials, highways, and local roads\nchange to the Surface map feature, which is styled as beige.\n\nTo create a smoother transition between the Road map features and the Surface map feature, add the following keyzooms and zoom-level styling:\n\n| Map feature | Zoom level 0 | Zoom level 12 | Zoom level 17 |\n|-------------|--------------|---------------|---------------|\n| Arterial | red | red | beige |\n| Highway | blue | blue | beige |\n| Local | yellow | yellow | beige |\n\nAfter adding zoom-level styling, when you zoom in, the following occurs:\n\n- The arterials, highways, and local roads display the custom styled color from zoom levels 0 to 12.\n- After zoom level 12, the styled color begins to fade into the beige color until fully transitioning to the beige color from the Surface map feature style at zoom level 17.\n\n| **Caution:** This feature interpolation is not supported for raster, so you can only smooth style transitions for apps that are on mobile or use JavaScript vector maps."]]