{"id":161,"date":"2026-03-10T14:38:29","date_gmt":"2026-03-10T06:38:29","guid":{"rendered":"https:\/\/blog.ichenfu.cn\/?page_id=161"},"modified":"2026-03-10T14:38:30","modified_gmt":"2026-03-10T06:38:30","slug":"%e6%88%91%e7%9a%84%e8%b6%b3%e8%bf%b9","status":"publish","type":"page","link":"https:\/\/blog.ichenfu.cn\/index.php\/%e6%88%91%e7%9a%84%e8%b6%b3%e8%bf%b9\/","title":{"rendered":"\u6211\u7684\u8db3\u8ff9"},"content":{"rendered":"\r\n    <!-- ========== \u590d\u523b\u7248CSS\u6837\u5f0f ========== -->\r\n    <style>\r\n        \/* \u5730\u56fe\u5bb9\u5668 *\/\r\n        #footprint-full-container {\r\n            width: 100%;\r\n            height: 800px;\r\n            margin: 0 auto;\r\n            position: relative;\r\n        }\r\n        \/* \u9876\u90e8\u7b5b\u9009\u680f\uff08\u6838\u5fc3UI\uff09 *\/\r\n        .footprint-filter-bar {\r\n            position: absolute;\r\n            top: 15px;\r\n            left: 15px;\r\n            z-index: 100;\r\n            display: flex;\r\n            align-items: center;\r\n            background: rgba(255, 255, 255, 0.95);\r\n            border-radius: 4px;\r\n            box-shadow: 0 1px 3px rgba(0,0,0,0.1);\r\n            padding: 6px;\r\n            gap: 4px;\r\n        }\r\n        \/* \u7b5b\u9009\u6309\u94ae\u901a\u7528\u6837\u5f0f *\/\r\n        .filter-item {\r\n            padding: 6px 12px;\r\n            border-radius: 3px;\r\n            border: none;\r\n            background: transparent;\r\n            color: #333;\r\n            font-size: 14px;\r\n            cursor: pointer;\r\n            transition: all 0.2s;\r\n        }\r\n        .filter-item:hover {\r\n            background: #f0f0f0;\r\n        }\r\n        .filter-item.active {\r\n            background: #000;\r\n            color: #fff;\r\n        }\r\n        \/* \u5b63\u8282\u7279\u6b8a\u6837\u5f0f\uff08\u9ed1\u5e95\u767d\u5b57\u5e26\u6807\u8bc6\uff09 *\/\r\n        .filter-item.season.active {\r\n            background: #000;\r\n            color: #fff;\r\n            position: relative;\r\n        }\r\n        .filter-item.season.active::after {\r\n            content: '\u5b63';\r\n            font-size: 12px;\r\n            margin-left: 4px;\r\n            opacity: 0.8;\r\n        }\r\n        \/* \u96c6\u7fa4\u663e\u793a\u5f00\u5173 *\/\r\n        .cluster-switch {\r\n            position: absolute;\r\n            bottom: 20px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            z-index: 100;\r\n            background: rgba(255,255,255,0.9);\r\n            padding: 4px 8px;\r\n            border-radius: 12px;\r\n            font-size: 12px;\r\n            color: #666;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n        }\r\n        \/* \u79fb\u52a8\u7aef\u9002\u914d *\/\r\n        @media (max-width: 768px) {\r\n            #footprint-full-container {\r\n                height: 500px;\r\n            }\r\n            .footprint-filter-bar {\r\n                flex-wrap: wrap;\r\n                top: 10px;\r\n                left: 10px;\r\n                right: 10px;\r\n                justify-content: center;\r\n            }\r\n        }\r\n        \/* \u81ea\u5b9a\u4e49\u5730\u56fe\u6807\u7b7e *\/\r\n        .amap-marker-label {\r\n            border: none !important;\r\n            background: transparent !important;\r\n            font-size: 12px;\r\n            color: #333;\r\n        }\r\n    <\/style>\r\n\r\n    <!-- ========== \u524d\u7aefHTML\u7ed3\u6784 ========== -->\r\n    <div id=\"footprint-full-container\">\r\n        <!-- \u9876\u90e8\u7b5b\u9009\u680f\uff08\u5b8c\u5168\u590d\u523b\uff09 -->\r\n        <div class=\"footprint-filter-bar\">\r\n            <button class=\"filter-item active\" data-filter=\"all\" data-type=\"master\">\u5168\u90e8\u8db3\u8ff9<\/button>\r\n            \r\n            <!-- \u5e74\u4efd\u7b5b\u9009\uff08\u52a8\u6001\u751f\u6210\uff09 -->\r\n                            <button class=\"filter-item\" data-filter=\"2026\" data-type=\"year\">2026<\/button>\r\n                            <button class=\"filter-item\" data-filter=\"2024\" data-type=\"year\">2024<\/button>\r\n                            <button class=\"filter-item\" data-filter=\"2023\" data-type=\"year\">2023<\/button>\r\n            \r\n            <!-- \u5b63\u8282\u7b5b\u9009 -->\r\n                            <button class=\"filter-item season\" data-filter=\"\u6625\" data-type=\"season\">\u6625<\/button>\r\n                            <button class=\"filter-item season\" data-filter=\"\u590f\" data-type=\"season\">\u590f<\/button>\r\n                            <button class=\"filter-item season\" data-filter=\"\u79cb\" data-type=\"season\">\u79cb<\/button>\r\n                            <button class=\"filter-item season\" data-filter=\"\u51ac\" data-type=\"season\">\u51ac<\/button>\r\n            \r\n            <!-- \u7c7b\u578b\u7b5b\u9009 -->\r\n                            <button class=\"filter-item\" data-filter=\"\u51fa\u5dee\" data-type=\"category\">\u51fa\u5dee<\/button>\r\n                            <button class=\"filter-item\" data-filter=\"\u5386\u53f2\" data-type=\"category\">\u5386\u53f2<\/button>\r\n                            <button class=\"filter-item\" data-filter=\"\u57ce\u5e02\" data-type=\"category\">\u57ce\u5e02<\/button>\r\n                            <button class=\"filter-item\" data-filter=\"\u6587\u5316\" data-type=\"category\">\u6587\u5316<\/button>\r\n                            <button class=\"filter-item\" data-filter=\"\u65c5\u884c\" data-type=\"category\">\u65c5\u884c<\/button>\r\n                            <button class=\"filter-item\" data-filter=\"\u6d77\u6ee8\" data-type=\"category\">\u6d77\u6ee8<\/button>\r\n                            <button class=\"filter-item\" data-filter=\"\u7f8e\u98df\" data-type=\"category\">\u7f8e\u98df<\/button>\r\n                            <button class=\"filter-item\" data-filter=\"\u81ea\u7136\" data-type=\"category\">\u81ea\u7136<\/button>\r\n                            <button class=\"filter-item\" data-filter=\"\u9ad8\u539f\" data-type=\"category\">\u9ad8\u539f<\/button>\r\n                    <\/div>\r\n\r\n        <!-- \u5730\u56fe\u753b\u5e03 -->\r\n        <div id=\"amap-container\" style=\"width:100%;height:100%;\"><\/div>\r\n\r\n        <!-- \u96c6\u7fa4\u663e\u793a\u5f00\u5173\uff08\u89c6\u89c9\u590d\u523b\uff0c\u529f\u80fd\u53ef\u9009\uff09 -->\r\n        <div class=\"cluster-switch\">\r\n            \u96c6\u7fa4\u663e\u793a\r\n            <label class=\"switch\">\r\n                <input type=\"checkbox\" id=\"cluster-toggle\" checked>\r\n                <span class=\"slider round\"><\/span>\r\n            <\/label>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- ========== \u9ad8\u5fb7\u5730\u56fe\u6838\u5fc3JS ========== -->\r\n    <script src=\"https:\/\/webapi.amap.com\/maps?v=2.0&key=e771335b9fff0837817dc51c627d4774&plugin=AMap.Scale,AMap.ToolBar\"><\/script>\r\n    <script>\r\n        \/\/ \u5168\u5c40\u53d8\u91cf\r\n        var map = null;\r\n        var allPoints = [{\"name\":\"\\u5317\\u4eac\",\"lng\":116.403874,\"lat\":39.914885,\"year\":\"2026\",\"season\":\"\\u51ac\",\"type\":\"\\u51fa\\u5dee\"},{\"name\":\"\\u4e0a\\u6d77\",\"lng\":121.473701,\"lat\":31.230416,\"year\":\"2024\",\"season\":\"\\u79cb\",\"type\":\"\\u65c5\\u884c\"},{\"name\":\"\\u5e7f\\u5dde\",\"lng\":113.264388,\"lat\":23.12911,\"year\":\"2023\",\"season\":\"\\u590f\",\"type\":\"\\u7f8e\\u98df\"},{\"name\":\"\\u6210\\u90fd\",\"lng\":104.065735,\"lat\":30.659462,\"year\":\"2024\",\"season\":\"\\u6625\",\"type\":\"\\u6587\\u5316\"},{\"name\":\"\\u62c9\\u8428\",\"lng\":91.132212,\"lat\":29.654511,\"year\":\"2024\",\"season\":\"\\u590f\",\"type\":\"\\u9ad8\\u539f\"},{\"name\":\"\\u9752\\u5c9b\",\"lng\":120.36522,\"lat\":36.08289,\"year\":\"2023\",\"season\":\"\\u590f\",\"type\":\"\\u6d77\\u6ee8\"},{\"name\":\"\\u5f20\\u5bb6\\u754c\",\"lng\":110.479295,\"lat\":29.117994,\"year\":\"2024\",\"season\":\"\\u79cb\",\"type\":\"\\u81ea\\u7136\"}];\r\n        var currentMarkers = [];\r\n        var currentPolyline = null;\r\n        var originalPath = []; \/\/ \u539f\u59cb\u8f68\u8ff9\u8def\u5f84\r\n\r\n        \/\/ \u521d\u59cb\u5316\u5730\u56fe\uff08\u6838\u5fc3\uff1a\u8bbe\u7f6e\u7070\u767d\u5e95\u98ce\u683c\uff09\r\n        function initMap() {\r\n            map = new AMap.Map('amap-container', {\r\n                zoom: 4,\r\n                center: [108.95, 34.27], \/\/ \u4e2d\u56fd\u4e2d\u5fc3\u70b9\r\n                resizeEnable: true,\r\n                \/\/ 1. \u9690\u85cf\u9ad8\u5fb7\u9ed8\u8ba4Logo\u548c\u7248\u6743\uff08\u89c6\u89c9\u51c0\u5316\uff09\r\n                logoPosition: 'LB',\r\n                \/\/ 2. \u8bbe\u7f6e\u5730\u56fe\u6837\u5f0f\u4e3a\u3010\u7070\u767d\u7b80\u7ea6\u98ce\u3011\uff08\u5173\u952e\uff09\r\n                mapStyle: 'amap:\/\/styles\/grayscale', \r\n                \/\/ 3. \u9690\u85cf\u591a\u4f59\u63a7\u4ef6\uff0c\u53ea\u4fdd\u7559\u6bd4\u4f8b\u5c3a\r\n                features: ['bg', 'road', 'building'],\r\n                viewMode: '2D'\r\n            });\r\n\r\n            \/\/ \u6dfb\u52a0\u7cbe\u7b80\u6bd4\u4f8b\u5c3a\uff08\u53c2\u8003\u56fe\u6837\u5f0f\uff09\r\n            map.addControl(new AMap.Scale({\r\n                position: 'RB',\r\n                offset: [20, 50]\r\n            }));\r\n\r\n            \/\/ \u521d\u59cb\u5316\u539f\u59cb\u8f68\u8ff9\u8def\u5f84\r\n            allPoints.forEach(p => {\r\n                originalPath.push([p.lng, p.lat]);\r\n            });\r\n\r\n            \/\/ \u9996\u6b21\u52a0\u8f7d\u663e\u793a\u5168\u90e8\u8db3\u8ff9\r\n            renderMap(allPoints);\r\n\r\n            \/\/ \u7ed1\u5b9a\u7b5b\u9009\u4e8b\u4ef6\r\n            bindFilterEvents();\r\n        }\r\n\r\n        \/\/ \u6e32\u67d3\u5730\u56fe\uff1a\u7ed8\u5236\u70b9\u4f4d\u548c\u7ea2\u8272\u8f68\u8ff9\r\n        function renderMap(filteredPoints) {\r\n            \/\/ 1. \u6e05\u9664\u65e7\u7684\u6807\u8bb0\u548c\u8f68\u8ff9\r\n            if (currentMarkers.length > 0) {\r\n                map.remove(currentMarkers);\r\n                currentMarkers = [];\r\n            }\r\n            if (currentPolyline) {\r\n                map.remove(currentPolyline);\r\n                currentPolyline = null;\r\n            }\r\n\r\n            if (filteredPoints.length === 0) {\r\n                map.setFitView();\r\n                return;\r\n            }\r\n\r\n            \/\/ 2. \u7ed8\u5236\u7ea2\u8272\u8f68\u8ff9\u7ebf\uff08\u590d\u523b\u53c2\u8003\u56fe\u7684\u7ea2\u8272\u8def\u7ebf\uff09\r\n            var path = filteredPoints.map(p => [p.lng, p.lat]);\r\n            currentPolyline = new AMap.Polyline({\r\n                path: path,\r\n                strokeColor: '#D94141', \/\/ \u53c2\u8003\u56fe\u7684\u7ea2\u8272\r\n                strokeWeight: 3,\r\n                strokeOpacity: 0.8,\r\n                strokeStyle: 'solid'\r\n            });\r\n            map.add(currentPolyline);\r\n\r\n            \/\/ 3. \u7ed8\u5236\u8db3\u8ff9\u70b9\u4f4d\uff08\u84dd\u7eff\u6e10\u53d8\u5706\u70b9\uff09\r\n            filteredPoints.forEach(point => {\r\n                var marker = new AMap.Marker({\r\n                    position: [point.lng, point.lat],\r\n                    title: point.name,\r\n                    \/\/ \u81ea\u5b9a\u4e49\u84dd\u7eff\u6e10\u53d8\u56fe\u6807\uff08\u53c2\u8003\u56fe\u6837\u5f0f\uff09\r\n                    icon: new AMap.Icon({\r\n                        size: new AMap.Size(12, 12),\r\n                        image: 'data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjUiIGZpbGw9IiM4RkZGRkYiIGZpbGwtb3BhY2l0eT0iMC44Ii8+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjQiIGZpbGw9IiMyRkZGRkYiLz48L3N2Zz4=',\r\n                        imageSize: new AMap.Size(12, 12)\r\n                    }),\r\n                    \/\/ \u663e\u793a\u57ce\u5e02\u540d\u6807\u7b7e\r\n                    label: {\r\n                        content: point.name,\r\n                        offset: new AMap.Pixel(15, -5)\r\n                    }\r\n                });\r\n                currentMarkers.push(marker);\r\n            });\r\n\r\n            map.add(currentMarkers);\r\n\r\n            \/\/ 4. \u81ea\u9002\u5e94\u89c6\u91ce\uff0c\u663e\u793a\u6240\u6709\u8db3\u8ff9\r\n            map.setFitView(currentMarkers.concat(currentPolyline), false, [50, 50, 50, 50]);\r\n        }\r\n\r\n        \/\/ \u7ed1\u5b9a\u7b5b\u9009\u4e8b\u4ef6\uff08\u591a\u7ef4\u5ea6\u8fc7\u6ee4\uff09\r\n        function bindFilterEvents() {\r\n            const buttons = document.querySelectorAll('.filter-item');\r\n            buttons.forEach(btn => {\r\n                btn.addEventListener('click', function() {\r\n                    \/\/ \u5207\u6362\u6fc0\u6d3b\u6837\u5f0f\r\n                    buttons.forEach(b => b.classList.remove('active'));\r\n                    this.classList.add('active');\r\n\r\n                    const filterVal = this.dataset.filter;\r\n                    const filterType = this.dataset.type;\r\n                    let result = [];\r\n\r\n                    \/\/ \u7b5b\u9009\u903b\u8f91\r\n                    if (filterType === 'master') {\r\n                        \/\/ \u5168\u90e8\u8db3\u8ff9\r\n                        result = allPoints;\r\n                    } else if (filterType === 'year') {\r\n                        \/\/ \u6309\u5e74\u4efd\u7b5b\u9009\r\n                        result = allPoints.filter(p => p.year === filterVal);\r\n                    } else if (filterType === 'season') {\r\n                        \/\/ \u6309\u5b63\u8282\u7b5b\u9009\r\n                        result = allPoints.filter(p => p.season === filterVal);\r\n                    } else if (filterType === 'category') {\r\n                        \/\/ \u6309\u7c7b\u578b\u7b5b\u9009\r\n                        result = allPoints.filter(p => p.type === filterVal);\r\n                    }\r\n\r\n                    \/\/ \u91cd\u65b0\u6e32\u67d3\r\n                    renderMap(result);\r\n                });\r\n            });\r\n\r\n            \/\/ \u96c6\u7fa4\u5f00\u5173\uff08\u89c6\u89c9\u6548\u679c\uff0c\u5b9e\u9645\u529f\u80fd\u53ef\u6839\u636e\u9700\u6c42\u5f00\u542f\uff09\r\n            document.getElementById('cluster-toggle').addEventListener('change', function() {\r\n                \/\/ \u8fd9\u91cc\u53ef\u6269\u5c55\u96c6\u7fa4\u529f\u80fd\uff0c\u5f53\u524d\u5148\u505a\u89c6\u89c9\u5207\u6362\r\n                map.setFitView();\r\n            });\r\n        }\r\n\r\n        \/\/ \u9875\u9762\u52a0\u8f7d\u540e\u521d\u59cb\u5316\r\n        window.addEventListener('load', function() {\r\n            if (typeof AMap !== 'undefined') {\r\n                initMap();\r\n            } else {\r\n                setTimeout(initMap, 500);\r\n            }\r\n        });\r\n    <\/script>\r\n\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"class_list":["post-161","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blog.ichenfu.cn\/index.php\/wp-json\/wp\/v2\/pages\/161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.ichenfu.cn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.ichenfu.cn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ichenfu.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ichenfu.cn\/index.php\/wp-json\/wp\/v2\/comments?post=161"}],"version-history":[{"count":1,"href":"https:\/\/blog.ichenfu.cn\/index.php\/wp-json\/wp\/v2\/pages\/161\/revisions"}],"predecessor-version":[{"id":163,"href":"https:\/\/blog.ichenfu.cn\/index.php\/wp-json\/wp\/v2\/pages\/161\/revisions\/163"}],"wp:attachment":[{"href":"https:\/\/blog.ichenfu.cn\/index.php\/wp-json\/wp\/v2\/media?parent=161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}