Google 地图 - 地图类型

Google 地图 - 理解地图类型

Maps JavaScript API 提供了几种基本地图类型，它们提供不同的世界视觉表示。

基础地图类型

您可以在创建地图时使用 MapOptions 中的 mapTypeId 属性来设置初始地图类型。主要类型包括：

• roadmap: (默认) 标准、熟悉的 Google 地图视图，显示道路、标签、兴趣点和行政边界。
• satellite: 显示卫星影像。
• hybrid: 在卫星影像上叠加一层主要道路、标签和边界的透明图层。
• terrain: 强调物理地形特征，如山脉、河流和海拔，以及道路和标签。

设置初始地图类型

初始化地图时指定所需的类型 ID 字符串：

async function initMap() {
    const position = { lat: 35.6895, lng: 139.6917 }; // Tokyo
    const { Map } = await google.maps.importLibrary("maps");

    const map = new Map(document.getElementById("map"), {
        zoom: 11,
        center: position,
        mapId: "DEMO_MAP_ID",
        mapTypeId: 'satellite' // <-- Set initial type to Satellite
    });
}

示例：显示不同的地图类型

我们来看一下每种类型的代码示例。请记住在脚本 URL 中包含您的 API 密钥。

Roadmap (默认)

这是标准视图，常用于导航和一般位置显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roadmap Example</title>
    <style>#map { height: 400px; width: 100%; } html, body { height: 100%; margin: 0; padding: 0; }</style>
</head>
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const position = { lat: 40.7128, lng: -74.0060 }; // New York City
            const { Map } = await google.maps.importLibrary("maps");
            const map = new Map(document.getElementById("map"), {
                zoom: 12,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'roadmap' // Explicitly setting the default
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

预期输出：一个显示纽约市街道、公园和标签的典型地图。

Satellite

可用于从上方查看实际景观、建筑物和地理特征。

<!DOCTYPE html>
<!-- ... head ... -->
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const position = { lat: -15.7942, lng: -47.8825 }; // Brasília
            const { Map } = await google.maps.importLibrary("maps");
            const map = new Map(document.getElementById("map"), {
                zoom: 14,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'satellite' // <-- Set to Satellite
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

预期输出：巴西利亚的航拍照片，显示建筑物、道路（最初没有标签）和周围地形。

Hybrid

将卫星影像的视觉上下文与道路名称和标签的信息上下文结合起来。

<!DOCTYPE html>
<!-- ... head ... -->
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const position = { lat: 51.5074, lng: -0.1278 }; // London
            const { Map } = await google.maps.importLibrary("maps");
            const map = new Map(document.getElementById("map"), {
                zoom: 13,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'hybrid' // <-- Set to Hybrid
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

预期输出：伦敦的卫星视图，叠加了主要道路和地名。

Terrain

非常适合用于可视化地形，例如远足小径、国家公园或山区。

<!DOCTYPE html>
<!-- ... head ... -->
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const position = { lat: 36.5786, lng: -118.2920 }; // Mt. Whitney area
            const { Map } = await google.maps.importLibrary("maps");
            const map = new Map(document.getElementById("map"), {
                zoom: 11,
                center: position,
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'terrain' // <-- Set to Terrain
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

预期输出：显示惠特尼山周围山区地形的地图，带有等高线、阴影起伏、道路和标签。

以编程方式更改地图类型

地图初始化后，您可以使用 Map 对象的 setMapTypeId() 方法来更改地图类型。

// Assuming 'map' is your Map instance
map.setMapTypeId('satellite');

这通常与自定义控件或事件监听器结合使用，以允许用户切换类型。

基于云的地图样式和地图 ID

虽然 mapTypeId 设置了基础地图类型，但自定义地图 外观和风格 (颜色、特征密度、特定元素的可见性) 的现代且推荐方式是通过基于云的地图样式 (Cloud-based Maps Styling)。

• 您可以在 Google Cloud Console 中创建一个 地图样式 (Map Style)，以可视化方式自定义基础地图。
• 将此样式与一个 地图 ID (Map ID) 关联。
• 在创建地图时，将 mapId 包含在 MapOptions 中（如示例中使用的 mapId: "DEMO_MAP_ID" 所示）。
• 使用 Map ID 使您能够在 Google Cloud Console 中更新地图样式，而无需更改应用程序代码。

使用 mapId 比仅切换基础 mapTypeId 提供了更大的灵活性。您可以根据您的品牌和应用程序需求精确调整地图。

延伸阅读：

• 关于地图类型的官方文档
• 基于云的地图样式概览
• MapTypeId 参考