Google 地图 - 缩放

Google Maps - 控制缩放级别

缩放级别决定了地图的放大程度，控制可见细节量，从世界视图到单个建筑物。

理解缩放级别

缩放级别是整数，值越高对应更大的放大倍数（拉近）：

1：全球
5：大陆/洲
10： 城市
15： 街道
20： 单个建筑物

所需的确切级别取决于上下文和您希望显示的区域。

设置初始缩放级别

在使用 MapOptions 对象中的 zoom 属性创建地图时，可以设置初始缩放级别。

示例：将初始缩放级别设置为城市级别 (10)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Initial Zoom 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: 17.6868, lng: 83.2185 }; // Visakhapatnam
            const { Map } = await google.maps.importLibrary("maps");

            const map = new Map(document.getElementById("map"), {
                center: position,
                zoom: 10, // <-- 设置初始缩放级别到城市级别
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'roadmap'
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

预期输出：一个以维萨卡帕特南为中心的地图，缩放到足以看到城市大致布局和主要道路的程度。

示例：将初始缩放级别设置为街道级别 (15)

<!DOCTYPE html>
<!-- ... head ... -->
<body>
    <div id="map"></div>
    <script>
        async function initMap() {
            const position = { lat: 17.6868, lng: 83.2185 }; // Visakhapatnam
            const { Map } = await google.maps.importLibrary("maps");

            const map = new Map(document.getElementById("map"), {
                center: position,
                zoom: 15, // <-- 设置初始缩放级别到街道级别
                mapId: "DEMO_MAP_ID",
                mapTypeId: 'roadmap'
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async defer></script>
</body>
</html>

预期输出：地图现在被放大得更近，清晰地显示了单个街道和较小的地标。

通过编程方式更改缩放

地图加载后，您可以使用 Map 对象的 setZoom() 方法更改缩放级别。

// 假设 'map' 是您的 Map 实例

// 拉近（放大）
map.setZoom(17);

// 拉远（缩小）
// map.setZoom(12);

这通常用于响应用户操作（例如点击按钮）或事件。

获取当前缩放级别

要找出当前缩放级别，请使用 getZoom() 方法。

const currentZoom = map.getZoom();
console.log("Current zoom level:", currentZoom);

如果您需要根据用户的缩放程度做出决策，或者监听 zoom_changed 事件，这会很有用。

示例：缩放按钮（概念性）

设想添加自定义按钮来控制缩放：

<!-- HTML -->
<button id="zoomInBtn">Zoom In</button>
<button id="zoomOutBtn">Zoom Out</button>
<div id="map"></div>

<script>
    let map;

    async function initMap() {
        // ... (地图初始化) ...
        map = new Map(document.getElementById("map"), { /* ... options ... */ });

        document.getElementById('zoomInBtn').addEventListener('click', () => {
            const currentZoom = map.getZoom();
            if (currentZoom < 21) { // 如果需要，检查最大缩放
                 map.setZoom(currentZoom + 1);
            }
        });

        document.getElementById('zoomOutBtn').addEventListener('click', () => {
             const currentZoom = map.getZoom();
            if (currentZoom > 1) { // 如果需要，检查最小缩放
                 map.setZoom(currentZoom - 1);
            }
        });

        // 监听由任何方式（按钮、滚动、控件）触发的缩放变化
        map.addListener('zoom_changed', () => {
            console.log('Zoom changed to:', map.getZoom());
        });
    }
</script>
<!-- API 脚本加载 -->

这展示了 setZoom() 和 getZoom() 如何与用户界面元素和事件监听器一起使用。