{"id":19,"date":"2026-03-09T15:27:18","date_gmt":"2026-03-09T07:27:18","guid":{"rendered":"http:\/\/110.42.203.57\/?page_id=19"},"modified":"2026-03-09T17:25:30","modified_gmt":"2026-03-09T09:25:30","slug":"%e4%b8%ad%e5%a5%b3%e6%97%b6%e4%bb%a3%e6%98%9f%e5%85%89%e5%9c%b0%e5%9b%be","status":"publish","type":"page","link":"https:\/\/zhongnvshidai.com\/index.php\/%e4%b8%ad%e5%a5%b3%e6%97%b6%e4%bb%a3%e6%98%9f%e5%85%89%e5%9c%b0%e5%9b%be\/","title":{"rendered":"\u4e2d\u5973\u65f6\u4ee3\u661f\u5149\u5730\u56fe"},"content":{"rendered":"\n<!-- \u9ad8\u5fb7\u5730\u56fe\u5bb9\u5668\uff1a\u5c45\u4e2d\u663e\u793a\uff0c\u589e\u5f3a\u8d28\u611f -->\n<div id=\"starlight-map\" style=\"width: 100%; height: 700px; max-width: 900px; margin: 2rem auto; border-radius: 16px; box-shadow: 0 10px 30px rgba(90,24,154,0.1); border: 1px solid #F3E8FF;\"><\/div>\n\n<script>\n\/\/ \u4f60\u7684\u9ad8\u5fb7Key + \u5b89\u5168\u5bc6\u94a5\nconst AMAP_KEY = 'a92b9c530a19a2f4734d397c8e8b8271';\nconst AMAP_SECRET = '3aec6ae546333c1f407746aabaf13206';\n\n\/\/ \u751f\u6210\u7b7e\u540d\nfunction generateSignature() {\n    return Math.floor(Date.now() \/ 1000).toString();\n}\n\n\/\/ \u5f02\u6b65\u52a0\u8f7d\u9ad8\u5fb7\u811a\u672c\nfunction loadAMapScript() {\n    return new Promise((resolve, reject) => {\n        const timestamp = generateSignature();\n        const script = document.createElement('script');\n        script.src = `https:\/\/webapi.amap.com\/maps?v=2.0&key=${AMAP_KEY}&s=${timestamp}`;\n        script.onload = () => resolve(AMap);\n        script.onerror = (err) => reject(`\u811a\u672c\u52a0\u8f7d\u5931\u8d25\uff1a${err.message}`);\n        document.head.appendChild(script);\n    });\n}\n\n\/\/ \u521d\u59cb\u5316\u5730\u56fe + \u52a8\u6001\u661f\u5149\u6548\u679c\nasync function initAMap() {\n    try {\n        const AMap = await loadAMapScript();\n        await new Promise((resolve) => AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.InfoWindow'], resolve));\n\n        \/\/ \u6d4b\u8bd5\u6570\u636e\uff08\u5317\u4eac\uff0c\u53ef\u66ff\u6362\u4e3a\u7528\u6237\u6ce8\u518c\u5730\uff09\n        const userStar = {\n            name: \"\u5317\u4eac\u5e02\",\n            lng: 116.4074,\n            lat: 39.9042,\n            nickname: \"\u9996\u6279\u661f\u5149\u4f19\u4f34\" \/\/ \u53ef\u66ff\u6362\u4e3a\u7528\u6237\u540d\n        };\n\n        \/\/ \u521d\u59cb\u5316\u5730\u56fe\uff1a\u4e2d\u56fd\u5168\u5883\u5c45\u4e2d\uff0c\u6df1\u8272\u6d45\u7eb9\u5e95\u56fe\u66f4\u663e\u661f\u5149\n        const map = new AMap.Map('starlight-map', {\n            zoom: 4,\n            center: [104.0, 35.0],\n            resizeEnable: true,\n            mapStyle: 'amap:\/\/styles\/light',\n            scrollWheel: true,\n            dragEnable: true\n        });\n\n        \/\/ \u6dfb\u52a0\u8f7b\u91cf\u63a7\u4ef6\uff0c\u4e0d\u7834\u574f\u89c6\u89c9\n        map.addControl(new AMap.ToolBar({ position: 'RB', style: 'lite' }));\n        map.addControl(new AMap.Scale({ position: 'LB' }));\n\n        \/\/ \ud83c\udf1f \u6838\u5fc3\uff1a\u521b\u5efa\u4e0b\u843d+\u7efd\u653e+\u95ea\u70c1\u7684\u661f\u5149\u6548\u679c\n        function createStarAnimation(starData) {\n            const lnglat = new AMap.LngLat(starData.lng, starData.lat);\n            \/\/ 1. \u4e0b\u843d\u8d77\u70b9\uff1a\u76ee\u6807\u70b9\u6b63\u4e0a\u65b920\u4e2a\u7eac\u5ea6\uff08\u89c6\u89c9\u4e0a\u7684\u201c\u5929\u7a7a\u201d\uff09\n            const startLat = starData.lat + 20;\n            const startLnglat = new AMap.LngLat(starData.lng, startLat);\n\n            \/\/ \u2014\u2014 \u6b65\u9aa41\uff1a\u521b\u5efa\u4e0b\u843d\u7684\u201c\u6d41\u661f\u201d\u6838\u5fc3 \u2014\u2014\n            const starMarker = new AMap.Marker({\n                position: startLnglat,\n                offset: new AMap.Pixel(-10, -10),\n                content: `\n                    <div style=\"width: 20px; height: 20px; background: radial-gradient(circle, #FFC107 0%, #FFD700 100%); border-radius: 50%; box-shadow: 0 0 15px #FFC107; opacity: 1;\"><\/div>\n                `,\n                zIndex: 15\n            });\n            map.add(starMarker);\n\n            \/\/ \u2014\u2014 \u6b65\u9aa42\uff1a\u6267\u884c\u4e0b\u843d\u52a8\u753b \u2014\u2014\n            const dropDuration = 1500; \/\/ \u4e0b\u843d\u65f6\u957f1.5\u79d2\n            const dropStep = 30; \/\/ \u52a8\u753b\u5e27\u7387\n            let dropProgress = 0;\n            const dropTimer = setInterval(() => {\n                dropProgress += dropStep;\n                const progress = Math.min(dropProgress \/ dropDuration, 1);\n                \/\/ \u7f13\u52a8\u51fd\u6570\uff1a\u5148\u5feb\u540e\u6162\uff0c\u6a21\u62df\u91cd\u529b\u4e0b\u843d\n                const easeProgress = 1 - Math.pow(1 - progress, 3);\n                \/\/ \u8ba1\u7b97\u5f53\u524d\u7eac\u5ea6\n                const currentLat = startLat - (20 * easeProgress);\n                starMarker.setPosition(new AMap.LngLat(starData.lng, currentLat));\n\n                \/\/ \u4e0b\u843d\u5b8c\u6210\uff1a\u9500\u6bc1\u6d41\u661f\uff0c\u5f00\u59cb\u7efd\u653e\u52a8\u753b\n                if (progress >= 1) {\n                    clearInterval(dropTimer);\n                    map.remove(starMarker);\n                    createBloomAnimation(lnglat, starData);\n                }\n            }, dropStep);\n        }\n\n        \/\/ \u2014\u2014 \u6b65\u9aa43\uff1a\u521b\u5efa\u843d\u5730\u7efd\u653e+\u6301\u7eed\u95ea\u70c1\u6548\u679c \u2014\u2014\n        function createBloomAnimation(lnglat, starData) {\n            \/\/ \u5b58\u50a8\u6240\u6709\u52a8\u753b\u5708\u5c42\uff0c\u65b9\u4fbf\u540e\u7eed\u9500\u6bc1\n            const bloomLayers = [];\n\n            \/\/ 1. \u6838\u5fc3\u661f\u5149\uff08\u6301\u7eed\u95ea\u70c1\uff09\n            const coreStar = new AMap.Circle({\n                center: lnglat,\n                radius: 15000, \/\/ \u6838\u5fc3\u534a\u5f8415\u516c\u91cc\n                strokeColor: '#FFC107',\n                strokeWeight: 2,\n                strokeOpacity: 1,\n                fillColor: '#FFC107',\n                fillOpacity: 0.7,\n                zIndex: 14\n            });\n            map.add(coreStar);\n            bloomLayers.push(coreStar);\n\n            \/\/ 2. \u7efd\u653e\u5149\u66551\uff08\u5916\u5c42\u6df1\u7d2b\uff0c\u5feb\u901f\u6269\u6563\uff09\n            const bloomLayer1 = new AMap.Circle({\n                center: lnglat,\n                radius: 20000,\n                strokeColor: '#5A189A',\n                strokeWeight: 3,\n                strokeOpacity: 0.9,\n                fillColor: '#5A189A',\n                fillOpacity: 0.2,\n                zIndex: 12\n            });\n            map.add(bloomLayer1);\n            bloomLayers.push(bloomLayer1);\n\n            \/\/ 3. \u7efd\u653e\u5149\u66552\uff08\u4e2d\u5c42\u6e10\u53d8\u7d2b\uff0c\u6162\u901f\u6269\u6563\uff09\n            const bloomLayer2 = new AMap.Circle({\n                center: lnglat,\n                radius: 10000,\n                strokeColor: '#7B2CBF',\n                strokeWeight: 2,\n                strokeOpacity: 0.8,\n                fillColor: '#7B2CBF',\n                fillOpacity: 0.15,\n                zIndex: 13\n            });\n            map.add(bloomLayer2);\n            bloomLayers.push(bloomLayer2);\n\n            \/\/ \u2014\u2014 \u7efd\u653e\u52a8\u753b\uff1a\u5708\u5c42\u7f29\u653e+\u900f\u660e\u5ea6\u53d8\u5316 \u2014\u2014\n            const bloomDuration = 2000;\n            const bloomStep = 30;\n            let bloomProgress = 0;\n            const bloomTimer = setInterval(() => {\n                bloomProgress += bloomStep;\n                const progress = Math.min(bloomProgress \/ bloomDuration, 1);\n                const easeProgress = Math.pow(progress, 0.5); \/\/ \u7f13\u52a8\uff1a\u5148\u6162\u540e\u5feb\n\n                \/\/ \u5149\u66551\uff1a\u4ece10km\u653e\u5927\u523060km\uff0c\u900f\u660e\u5ea6\u4ece0.9\u964d\u52300\n                bloomLayer1.setRadius(20000 + 40000 * easeProgress);\n                bloomLayer1.setStrokeOpacity(0.9 * (1 - progress));\n                bloomLayer1.setFillOpacity(0.2 * (1 - progress));\n\n                \/\/ \u5149\u66552\uff1a\u4ece5km\u653e\u5927\u523030km\uff0c\u900f\u660e\u5ea6\u4ece0.8\u964d\u52300\n                bloomLayer2.setRadius(10000 + 20000 * easeProgress);\n                bloomLayer2.setStrokeOpacity(0.8 * (1 - progress));\n                bloomLayer2.setFillOpacity(0.15 * (1 - progress));\n\n                \/\/ \u7efd\u653e\u5b8c\u6210\uff1a\u505c\u6b62\u7efd\u653e\u52a8\u753b\uff0c\u542f\u52a8\u6301\u7eed\u95ea\u70c1\n                if (progress >= 1) {\n                    clearInterval(bloomTimer);\n                    startTwinkleAnimation(coreStar);\n                    \/\/ \u7ed1\u5b9a\u70b9\u51fb\u5f39\u7a97\uff08\u4ec5\u4fdd\u7559\u6838\u5fc3\u661f\u5149\u53ef\u70b9\u51fb\uff09\n                    bindInfoWindow(coreStar, starData);\n                }\n            }, bloomStep);\n        }\n\n        \/\/ \u2014\u2014 \u6b65\u9aa44\uff1a\u6838\u5fc3\u661f\u5149\u6301\u7eed\u95ea\u70c1\u52a8\u753b \u2014\u2014\n        function startTwinkleAnimation(coreStar) {\n            let isBright = true;\n            setInterval(() => {\n                coreStar.setFillOpacity(isBright ? 0.7 : 0.4);\n                coreStar.setStrokeOpacity(isBright ? 1 : 0.6);\n                isBright = !isBright;\n            }, 800); \/\/ \u95ea\u70c1\u9891\u73870.8\u79d2\/\u6b21\n        }\n\n        \/\/ \u2014\u2014 \u6b65\u9aa45\uff1a\u7ed1\u5b9a\u70b9\u51fb\u4fe1\u606f\u7a97\u53e3 \u2014\u2014\n        function bindInfoWindow(starLayer, starData) {\n            const infoWindow = new AMap.InfoWindow({\n                content: `\n                    <div style=\"padding: 14px 18px; background: linear-gradient(135deg, #5A189A 0%, #7B2CBF 100%); \n                                color: #FFC107; border-radius: 12px; box-shadow: 0 4px 12px rgba(90,24,154,0.3);\">\n                        <div style=\"font-size: 16px; font-weight: bold; margin-bottom: 6px;\">${starData.name}<\/div>\n                        <div style=\"font-size: 14px; opacity: 0.9;\">\u6b22\u8fce ${starData.nickname} \u52a0\u5165\u2728<\/div>\n                    <\/div>\n                `,\n                offset: new AMap.Pixel(0, -30),\n                closeWhenClickMap: true\n            });\n\n            starLayer.on('click', (e) => {\n                infoWindow.open(map, e.lnglat);\n            });\n        }\n\n        \/\/ \u542f\u52a8\u661f\u5149\u52a8\u753b\uff08\u6a21\u62df\u7528\u6237\u6ce8\u518c\u540e\u89e6\u53d1\uff09\n        setTimeout(() => {\n            createStarAnimation(userStar);\n        }, 800); \/\/ \u9875\u9762\u52a0\u8f7d0.8\u79d2\u540e\u89e6\u53d1\uff0c\u66f4\u81ea\u7136\n\n    } catch (error) {\n        console.error('\u5730\u56fe\u521d\u59cb\u5316\u5931\u8d25\uff1a', error);\n        document.getElementById('starlight-map').innerHTML = \n            `<div style=\"width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#5A189A;padding:0 20px;text-align:center;\">\n                \u661f\u5149\u5730\u56fe\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u5237\u65b0\u9875\u9762\u91cd\u8bd5\n             <\/div>`;\n    }\n}\n\n\/\/ \u6267\u884c\u521d\u59cb\u5316\ninitAMap();\n<\/script>\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":{"_acf_changed":false,"footnotes":""},"class_list":["post-19","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/zhongnvshidai.com\/index.php\/wp-json\/wp\/v2\/pages\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zhongnvshidai.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zhongnvshidai.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zhongnvshidai.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zhongnvshidai.com\/index.php\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":8,"href":"https:\/\/zhongnvshidai.com\/index.php\/wp-json\/wp\/v2\/pages\/19\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/zhongnvshidai.com\/index.php\/wp-json\/wp\/v2\/pages\/19\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/zhongnvshidai.com\/index.php\/wp-json\/wp\/v2\/media?parent=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}