{"id":114,"date":"2026-01-15T08:02:02","date_gmt":"2026-01-15T00:02:02","guid":{"rendered":"https:\/\/demo.joowp.com\/?page_id=114"},"modified":"2026-01-15T08:05:40","modified_gmt":"2026-01-15T00:05:40","slug":"%e6%b5%8b%e8%af%95%e9%a1%b5%e9%9d%a2","status":"publish","type":"page","link":"https:\/\/demo.joowp.com\/index.php\/%e6%b5%8b%e8%af%95%e9%a1%b5%e9%9d%a2\/","title":{"rendered":"\u6d4b\u8bd5\u9875\u9762"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-constrained wp-container-core-group-is-layout-12243e0f wp-block-group-is-layout-constrained\">\n<section class=\"biwin-map\">\n    <div class=\"biwin-map__content\">\n      <div class=\"biwin-map__content-header\">\n        <img decoding=\"async\" class=\"content-header__logo\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/logo.png\" \/>\n        <div class=\"content-header__types\">\n                                    <div class=\"content-header__types-item\">\n                <img decoding=\"async\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/ball1.png\" \/>\n                <div>\n                  <div class=\"types-item__num\">2<\/div>\n                  <div class=\"types-item__type\">Headquarters<\/div>\n                <\/div>\n              <\/div>\n                          <div class=\"content-header__types-item\">\n                <img decoding=\"async\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/ball2.png\" \/>\n                <div>\n                  <div class=\"types-item__num\">0<\/div>\n                  <div class=\"types-item__type\">R&D Center<\/div>\n                <\/div>\n              <\/div>\n                          <div class=\"content-header__types-item\">\n                <img decoding=\"async\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/ball3.png\" \/>\n                <div>\n                  <div class=\"types-item__num\">0<\/div>\n                  <div class=\"types-item__type\">Manufacturing Plants<\/div>\n                <\/div>\n              <\/div>\n                          <div class=\"content-header__types-item\">\n                <img decoding=\"async\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/ball4.png\" \/>\n                <div>\n                  <div class=\"types-item__num\">0<\/div>\n                  <div class=\"types-item__type\">Service Centers<\/div>\n                <\/div>\n              <\/div>\n                          <div class=\"content-header__types-item\">\n                <img decoding=\"async\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/ball5.png\" \/>\n                <div>\n                  <div class=\"types-item__num\">0<\/div>\n                  <div class=\"types-item__type\">Local Presence<\/div>\n                <\/div>\n              <\/div>\n                              <\/div>\n      <\/div>\n      <div class=\"biwin-map__content-main\">\n        <div class=\"content-main__left\">\n                                  <div class=\"content-main__left-item\" style=\"left: 110px\" data-region=\"Greater China\"\n              onclick=\"handleFocus(40.52409036947884, 107.28964032384553, this)\">\n              <img decoding=\"async\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/earth.png\" \/>\n              <div class=\"left-item__ps\">\n                <div class=\"left-item__ps-name\">Greater China<\/div>\n                <div class=\"left-item__ps-num\">2<\/div>\n              <\/div>\n            <\/div>\n                                            <div class=\"content-main__left-item\" style=\"left: 30px\" data-region=\"Asia\"\n              onclick=\"handleFocus(41.24465227307952, 84.16908867970007, this)\">\n              <img decoding=\"async\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/earth.png\" \/>\n              <div class=\"left-item__ps\">\n                <div class=\"left-item__ps-name\">Asia<\/div>\n                <div class=\"left-item__ps-num\">0<\/div>\n              <\/div>\n            <\/div>\n                                                                    <\/div>\n        <div id=\"globeViz\"><\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n  <div id=\"biwin-map-tooltip\" style=\"\n    position: fixed;\n    display: none;\n    pointer-events: none;\n    border-radius: 6px;\n    overflow: hidden;\n    z-index: 1000;\n    padding: 0;\n    margin: 0;\n    background-color: #ffffff;\n  \"><\/div>\n\n\n<script>\n      document.addEventListener('DOMContentLoaded', function() {\n      const points = [\n                              {\n              id: \"point1\",\n              pointColor: \"#f44250\",\n              lat: parseFloat(\"39.5276306926186\"),\n              lng: parseFloat(\"108.12831658370307\"),\n              name: \"BeiJing\",\n              value: 100,\n              title: \"BeiJing\",\n              address: \"No. 5 Yiheyuan Road, Haidian District, Beijing, P. R. China\",\n              email: \"2424144246@qq.com\",\n              tel: \"11111111@qq.com\",\n            },\n                      {\n              id: \"point2\",\n              pointColor: \"#3992ff\",\n              lat: parseFloat(\"23.67707889852187\"),\n              lng: parseFloat(\"108.42980595985011\"),\n              name: \"ShenZhen\",\n              value: 100,\n              title: \"ShenZhen\",\n              address: \"No. 2018 Nanshan Boulevard, Nanshan District, Shenzhen, Guangdong Province, P. R. China\",\n              email: \"asdfsdf0121@qq.com\",\n              tel: \"12341234@qq.com\",\n            },\n                        ];\n\n      \/\/ \u521b\u5efa\u95ea\u70c1\u7684\u5916\u5708\u6570\u636e\n      const rings = points.map((point) => ({\n        lat: point.lat,\n        lng: point.lng,\n        color: point.pointColor,\n        maxRadius: 2,\n        propagationSpeed: 0.5,\n        repeatPeriod: 2000,\n      }));\n\n      const tooltip = document.getElementById(\"biwin-map-tooltip\");\n\n      const highlightId = \"point1\";\n      const container = document.getElementById(\"globeViz\");\n\n      \/\/ \u5b9a\u4e49\u8f85\u52a9\u51fd\u6570\n      let selectedItem = null;\n      let autoRotateTimer;\n\n      const handleUserInteraction = () => {\n        world.controls().autoRotate = false;\n        clearTimeout(autoRotateTimer);\n        autoRotateTimer = setTimeout(() => {\n          world.controls().autoRotate = true;\n        }, 5000);\n      };\n\n      const clearSelection = () => {\n        if (selectedItem) {\n          selectedItem.classList.remove(\"selected\");\n          selectedItem = null;\n        }\n      };\n\n      const calcViewPort = (lats, lngs) => {\n        const latMin = Math.min(...lats),\n          latMax = Math.max(...lats),\n          lngMin = Math.min(...lngs),\n          lngMax = Math.max(...lngs);\n\n        \/\/ \u4e2d\u5fc3\u70b9\n        const lat = (latMin + latMax) \/ 2;\n        const lng = (lngMin + lngMax) \/ 2;\n\n        \/\/ \u6839\u636e\u8de8\u5ea6\u8ba1\u7b97\u4e00\u4e2a\u5408\u9002\u7684 altitude\n        \/\/ \u7ecf\u9a8c\u516c\u5f0f\uff1a\u6bcf 1\u00b0 \u2248 111 km\uff0c\u628a\u5bf9\u89d2\u7ebf km \u6570\u9664 6371\uff08\u5730\u7403\u534a\u5f84\uff09\u518d\u505a\u7ebf\u6027\u6620\u5c04\n        const latSpan = latMax - latMin,\n          lngSpan = lngMax - lngMin,\n          degSpan = Math.sqrt(latSpan * latSpan + lngSpan * lngSpan),\n          altitude = Math.min(2.5, 0.1 + degSpan \/ 35); \/\/ 35 \u662f\u8c03\u51fa\u6765\u7684\u7cfb\u6570\n\n        return { lat, lng, altitude };\n      };\n\n      const handleFocus = (lat, lng, element) => {\n        \/\/ \u6e05\u9664\u4e4b\u524d\u7684\u9009\u4e2d\u72b6\u6001\n        if (selectedItem) {\n          selectedItem.classList.remove(\"selected\");\n        }\n\n        \/\/ \u8bbe\u7f6e\u65b0\u7684\u9009\u4e2d\u72b6\u6001\n        if (element) {\n          selectedItem = element;\n          selectedItem.classList.add(\"selected\");\n        }\n\n        \/\/ \u91cd\u7f6e\u81ea\u52a8\u65cb\u8f6c\u5b9a\u65f6\u5668\uff085\u79d2\u65e0\u64cd\u4f5c\u540e\u624d\u6062\u590d\u81ea\u8f6c\uff09\n        handleUserInteraction();\n\n        world.pointOfView({ lat, lng }, 1000);\n      };\n\n      \/\/ \u5c06 handleFocus \u6302\u8f7d\u5230 window \u5bf9\u8c61\uff0c\u4f7f\u5176\u5728\u5168\u5c40\u4f5c\u7528\u57df\u53ef\u8bbf\u95ee\n      window.handleFocus = handleFocus;\n\n      window.world = new Globe(container)\n        .globeImageUrl(\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/tietu.webp\")\n        .backgroundColor(\"#ffffff\")\n        .hexPolygonColor(() => `#ffffff`)\n        .width(container.clientWidth) \/\/ \u2190 \u5173\u952e\n        .height(container.clientHeight) \/\/ \u2190 \u5173\u952e\n        .atmosphereAltitude(0.3)\n        .pointOfView({ lat: 0, lng: 0, altitude: 2 })\n        .labelsData(points)\n        .ringsData(rings)\n\n        .labelText((d) => `${d.name}`)\n        .labelSize(1)\n        .labelColor((d) => d.pointColor)\n        .labelDotRadius(0.5)\n        .labelAltitude(0.04)\n        .labelDotOrientation((d) => \"top\")\n\n        .ringColor((d) => {\n          return (t) => {\n            \/\/ \u5c06\u989c\u8272\u8f6c\u6362\u4e3a rgba \u5e76\u5e94\u7528\u900f\u660e\u5ea6\n            const color = d.color;\n            const alpha = 0.2 * (1 - t);\n            \/\/ \u5982\u679c\u662f hex \u989c\u8272\n            if (color.startsWith('#')) {\n              const r = parseInt(color.slice(1, 3), 16);\n              const g = parseInt(color.slice(3, 5), 16);\n              const b = parseInt(color.slice(5, 7), 16);\n              return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n            }\n            \/\/ \u9ed8\u8ba4\u8fd4\u56de\u539f\u8272\n            return color;\n          };\n        })\n        .ringMaxRadius(\"maxRadius\")\n        .ringPropagationSpeed(\"propagationSpeed\")\n        .ringRepeatPeriod(\"repeatPeriod\")\n        .ringAltitude(0.04)\n\n        .onGlobeClick(({ lat, lng }) => {\n          console.log(\"\u70b9\u51fb\u4f4d\u7f6e\uff1a\", { lat, lng });\n        });\n\n      const controls = world.controls();\n      controls.enableZoom = false;\n      controls.autoRotate = true;\n      controls.autoRotateSpeed = 0.3;\n\n      \/\/ \u76d1\u542c\u5404\u79cd\u4ea4\u4e92\u4e8b\u4ef6\n      controls.addEventListener(\"start\", () => {\n        handleUserInteraction();\n        clearSelection();\n      });\n      controls.addEventListener(\"end\", handleUserInteraction);\n\n      let isHoveringPoint = false;\n      let hideTimeout = null;\n      let mousePosition = { x: 0, y: 0 };\n      let lastHoverTime = 0;\n\n      \/\/ \u5148\u76d1\u542c\u9f20\u6807\u4f4d\u7f6e\n      document.addEventListener(\"mousemove\", (e) => {\n        mousePosition.x = e.clientX;\n        mousePosition.y = e.clientY;\n        lastHoverTime = Date.now();\n      });\n\n      world.onLabelHover((d, data, point) => {\n        console.log('onLabelHover - d:', d, 'data:', data, 'point:', point);\n        \/\/ \u5c1d\u8bd5\u4ece\u7b2c\u4e00\u4e2a\u6216\u7b2c\u4e8c\u4e2a\u53c2\u6570\u83b7\u53d6\u6570\u636e\n        const pointData = d || data;\n        if (pointData) {\n          isHoveringPoint = true;\n          if (hideTimeout) {\n            clearTimeout(hideTimeout);\n            hideTimeout = null;\n          }\n          lastHoverTime = Date.now();\n          tooltip.innerHTML = `\n      <div class=\"biwin-map-tooltip-wrapper\" style=\"border-top: 8px solid ${pointData.pointColor}\">\n        <div class=\"biwin-map-tooltip-title\">${pointData.title}<\/div>\n        <div class=\"biwin-map-tooltip-content\">\n          <div class=\"biwin-map-tooltip-content-item\">\n            <img decoding=\"async\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/address.png\" \/>\n            <div> ${pointData.address} <\/div>\n          <\/div>\n          <div class=\"biwin-map-tooltip-content-item\">\n            <img decoding=\"async\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/email.png\" \/>\n            <div> ${pointData.email} <\/div>\n          <\/div>\n          <div class=\"biwin-map-tooltip-content-item\">\n            <img decoding=\"async\" src=\"https:\/\/demo.joowp.com\/wp-content\/plugins\/sixe-biwin-map\/assets\/images\/tel.png\" \/>\n            <div> ${pointData.tel} <\/div>\n          <\/div>\n        <\/div>\n        <\/div>\n      `;\n          \/\/ \u4f7f\u7528\u5f53\u524d\u9f20\u6807\u4f4d\u7f6e\n          tooltip.style.left = mousePosition.x + 15 + 'px';\n          tooltip.style.top = mousePosition.y + 15 + 'px';\n          tooltip.style.display = \"block\";\n\n          \/\/ 2\u79d2\u540e\u81ea\u52a8\u9690\u85cf\n          hideTimeout = setTimeout(() => {\n            tooltip.style.display = \"none\";\n            isHoveringPoint = false;\n          }, 2000);\n        } else {\n          isHoveringPoint = false;\n          tooltip.style.display = \"none\";\n          if (hideTimeout) {\n            clearTimeout(hideTimeout);\n            hideTimeout = null;\n          }\n        }\n      });\n\n      window.addEventListener(\"resize\", () => {\n        world.width(container.clientWidth).height(container.clientHeight);\n      });\n      });\n      <\/script>\n<\/div>\n\n\n\n<p><\/p>\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,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-114","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/demo.joowp.com\/index.php\/wp-json\/wp\/v2\/pages\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.joowp.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.joowp.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.joowp.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.joowp.com\/index.php\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":2,"href":"https:\/\/demo.joowp.com\/index.php\/wp-json\/wp\/v2\/pages\/114\/revisions"}],"predecessor-version":[{"id":116,"href":"https:\/\/demo.joowp.com\/index.php\/wp-json\/wp\/v2\/pages\/114\/revisions\/116"}],"wp:attachment":[{"href":"https:\/\/demo.joowp.com\/index.php\/wp-json\/wp\/v2\/media?parent=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}