<html>
<head>
    <meta charset="UTF-8">
    <!--引入jQuery框架-->
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <!--引入jVectorMap库-->
    <script type="text/javascript" src="js/jquery-jvectormap-1.2.2.min.js"></script>
    <!--引入样式表-->
    <link href="js/jquery-jvectormap-1.2.2.css" rel="stylesheet" media="screen">
    <!--引入中国地图数据库-->
    <script type="text/javascript" src="js/jquery-jvectormap-cn-merc-en.js"></script>
    <title>似水流年旅行足迹地图</title>
</head>
<body>
    <div class="container">
        <div id="map"></div>
        <div id="info" class="info-container">
            <div id="city-count" class="info-line">我已点亮<span class="highlight">0</span>座城市</div>
            <div id="area-percent" class="info-line">已解锁约<span class="highlight">0%</span>的中国城市面积</div>
            <div id="extreme-cities" class="extreme-cities-container">
                <div class="city-stats">
                    <div class="stat-item">最东：<span class="highlight">无</span></div>
                    <div class="stat-item">最西：<span class="highlight">无</span></div>
                    <div class="stat-item">最南：<span class="highlight">无</span></div>
                    <div class="stat-item">最北：<span class="highlight">无</span></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 从JSON文件加载城市数据
        $.getJSON('json/jvectormap.json', function(data) {
            // 提取城市数据
            const cities = data.cities;
            const totalChinaArea = data.totalChinaArea;
            
            // 生成标记点数据
            const markers = Object.values(cities).map(city => ({
                latLng: city.coordinates,
                name: city.name
            }));
            
            // 计算统计信息
            function calculateStats() {
                // 1. 计算点亮城市数量
                const cityCount = markers.length;
                
                // 2. 计算已解锁面积百分比
                let visitedArea = 0;
                Object.values(cities).forEach(city => {
                    visitedArea += city.area || 0;
                });
                
                const areaPercent = (visitedArea / totalChinaArea * 100).toFixed(1); // 保留1位小数
                
                // 3. 计算最东、西、南、北城市
                let eastCity = null, westCity = null, southCity = null, northCity = null;
                
                Object.values(cities).forEach(city => {
                    const [lat, lng] = city.coordinates;
                    const cityName = `${city.province}·${city.name}`;
                    
                    if (!eastCity || lng > eastCity.lng) eastCity = {lng, cityName};
                    if (!westCity || lng < westCity.lng) westCity = {lng, cityName};
                    if (!southCity || lat < southCity.lat) southCity = {lat, cityName};
                    if (!northCity || lat > northCity.lat) northCity = {lat, cityName};
                });
                
                // 更新DOM
                $('#city-count .highlight').text(cityCount);
                $('#area-percent .highlight').text(areaPercent + '%');
                
                // 更新极值城市显示
                const updateExtremeCity = (selector, city) => {
                    const $item = $(selector);
                    if (city) {
                        $item.find('.highlight').text(city.cityName);
                    } else {
                        $item.find('.highlight').text("无");
                    }
                };
                
                updateExtremeCity('.city-stats .stat-item:nth-child(1)', eastCity);
                updateExtremeCity('.city-stats .stat-item:nth-child(2)', westCity);
                updateExtremeCity('.city-stats .stat-item:nth-child(3)', southCity);
                updateExtremeCity('.city-stats .stat-item:nth-child(4)', northCity);
            }
            
            // 格式化经纬度显示，保留原始精度（最多6位小数）
            function formatCoordinates(lat, lng) {
                // 保留原始精度，但最多显示6位小数
                const formatNum = (num) => {
                    let str = num.toString();
                    if (str.includes('.')) {
                        const parts = str.split('.');
                        const decimalPart = parts[1].substring(0, 6); // 最多取6位小数
                        return parts[0] + '.' + decimalPart;
                    }
                    return str + '.000000'; // 如果没有小数部分，添加6位0
                };
                
                return `经度: ${formatNum(lng)}, 纬度: ${formatNum(lat)}`;
            }
            
            // 初始化地图
            $('#map').vectorMap({
                map: 'cn_merc_en',   // 中国地图
                backgroundColor: 'transparent',
                zoomOnScroll: true,
                zoomMin: 0.8,
                zoomMax: 2.5,
                focusOn: {
                    x: 0.55,
                    y: 0.6,
                    scale: 1
                },
                regionStyle: {
                    initial: {
                        fill: '#d4e3f3',   // 地图颜色
                        "fill-opacity": 1,
                        stroke: '#fff',
                        "stroke-width": 1,
                        "stroke-opacity": 1
                    },
                    hover: {
                        fill: '#a8c5e0',
                        "fill-opacity": 0.8
                    },
                    selected: {
                        fill: '#e74c3c'
                    },
                    selectedHover: {}
                },
                markerStyle: {
                    initial: {
                        fill: '#e74c3c',
                        stroke: '#fff',
                        "stroke-width": 2,
                        "stroke-opacity": 0.8,
                        r: 4 // 减小标记点半径
                    },
                    hover: {
                        fill: '#c0392b',
                        stroke: '#fff',
                        r: 7,
                        "fill-opacity": 0.8
                    },
                },
                markers: markers,
                onMarkerLabelShow: function(event, label, index) {
                    const marker = markers[index];
                    const city = cities[marker.name];
                    
                    if (!city) return;
                    
                    // 格式化标签内容为卡片形式
                    const formattedArea = city.area ? `${city.area}万Km²` : '面积未知';
                    const coordinates = formatCoordinates(city.coordinates[0], city.coordinates[1]);
                    
                    // 构建卡片HTML
                    let cardHtml = `
                        <div class="city-card">
                            <div class="city-card-header">
                                <div class="city-card-name">${city.province}·${city.name}</div>
                                <div class="city-card-area">${formattedArea}</div>
                                <div class="city-card-postal">邮编: ${city.postalCode}</div>
                            </div>
                            <div class="city-card-content">
                                <div class="city-card-coordinates">${coordinates}</div>
                                <div class="city-card-description">${city.description}</div>
                                <div class="city-card-tags">
                    `;
                    
                    // 添加标签
                    if (city.tags && city.tags.length > 0) {
                        city.tags.forEach(tag => {
                            cardHtml += `<span class="city-card-tag">${tag}</span>`;
                        });
                    }
                    
                    cardHtml += `
                                </div>
                            </div>
                        </div>
                    `;
                    
                    label.html(cardHtml);
                },
                onMarkerClick: function(event, index) {
                    // 保持原有点击功能，但提示框已通过onMarkerLabelShow实现
                }
            });
            
            // 计算并显示统计信息
            calculateStats();
        });
    </script>
</body>
</html>