动态调整地图大小？

动态调整地图大小通常涉及到在网页或应用程序中根据用户的操作（如窗口大小变化、设备旋转等）来自动调整地图的显示尺寸。以下是一些常见的实现方法，主要针对网页应用中的地图组件，如 Google Maps、Leaflet 等。

使用 CSS 和 JavaScript 动态调整地图大小

1. 使用 CSS 设置地图容器的大小

首先，确保地图容器的大小是响应式的，可以使用 CSS 设置其宽度和高度为百分比值或使用 vh 和 vw 单位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Map Resize</title>
    <style>
        #map {
            width: 100%;
            height: 100vh; /* 视口高度 */
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
        }

        window.onload = initMap;
    </script>
</body>
</html>

2. 使用 JavaScript 监听窗口大小变化

如果需要在窗口大小变化时动态调整地图，可以使用 JavaScript 监听 resize 事件，并在事件触发时调整地图的大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Map Resize</title>
    <style>
        #map {
            width: 100%;
            height: 100vh; /* 视口高度 */
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
        }

        window.onload = initMap;

        window.onresize = function() {
            google.maps.event.trigger(map, 'resize');
            map.setCenter({lat: -34.397, lng: 150.644}); // 重新设置中心点
        };
    </script>
</body>
</html>

使用 Leaflet 动态调整地图大小

如果你使用的是 Leaflet，可以采用类似的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Map Resize</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            width: 100%;
            height: 100vh; /* 视口高度 */
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        window.onresize = function() {
            map.invalidateSize();
        };
    </script>
</body>
</html>

使用框架和库

如果你使用的是前端框架（如 React、Vue、Angular），可以利用框架的生命周期方法和状态管理来实现动态调整地图大小。

React 示例

import React, { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const MapComponent = () => {
    const mapRef = useRef(null);

    useEffect(() => {
        const map = L.map(mapRef.current).setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        const handleResize = () => {
            map.invalidateSize();
        };

        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
            map.remove();
        };
    }, []);

    return <div id="map" ref={mapRef} style={{ width: '100%', height: '100vh' }}></div>;
};

export default MapComponent;