尝试获取Leaflet地图以将地图视图更改为所选国家/地区选项

基础概念

Leaflet 是一个开源的 JavaScript 库，用于在网页上创建交互式地图。它基于 HTML5 和 CSS3，提供了丰富的地图功能和插件支持，适用于各种规模的地图项目。

类型

Leaflet 主要用于创建交互式地图，支持以下类型：

普通地图：显示地理信息和地图图层。
热力图：显示数据密度。
聚合地图：将大量数据点聚合成小图标。
自定义图层：支持自定义地图图层和样式。

应用场景

Web 应用：在网页上展示地理位置信息和地图。
移动应用：在移动设备上提供地图导航和位置服务。
数据可视化：通过地图展示和分析地理数据。

获取 Leaflet 地图并更改视图到所选国家/地区

假设你已经引入了 Leaflet 库，以下是一个简单的示例代码，展示如何将地图视图更改为所选国家/地区：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Map Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        #map {
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/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: '© OpenStreetMap contributors'
        }).addTo(map);

        // 假设用户选择了某个国家/地区
        var selectedCountry = 'France';

        // 使用第三方库或自定义代码获取国家边界数据
        fetch('https://api.example.com/countries/' + selectedCountry + '/boundary')
            .then(response => response.json())
            .then(data => {
                var countryBoundary = L.geoJSON(data).addTo(map);
                map.fitBounds(countryBoundary.getBounds());
            })
            .catch(error => console.error('Error fetching country boundary:', error));
    </script>
</body>
</html>