กลับไปยังบล็อก BIM และ IFC
เครื่องมือและการเปรียบเทียบ · 2026-10-31 · 5 นาที
วิธีฝังแผนที่ติดตามการขนส่งในเว็บไซต์: WordPress, Shopify, SharePoint และ Taobao
ซัพพลายเออร์และผู้รับจัดการขนส่งสามารถแสดงตำแหน่งสินค้าให้ลูกค้าเห็นบนเว็บไซต์ของตนเอง โดยไม่ต้องมีคีย์ API แผนที่หรือแบ็กเอนด์ นี่คือสิ่งที่ทำได้ในแต่ละแพลตฟอร์ม ผลกระทบต่อหน้าเว็บ และจุดที่คำตอบตรง ๆ คือไม่ได้
วิธีฝังแผนที่ติดตามการขนส่งในเว็บไซต์: WordPress, Shopify, SharePoint และ Taobao — IFC Viewer Online article cover
ผู้ซื้อที่รอตู้คอนเทนเนอร์จากเซี่ยงไฮ้มักได้รับแค่ PDF และลิงก์ของสายเรือ หากคุณเป็นซัพพลายเออร์หรือผู้รับจัดการขนส่ง คุณแสดงข้อมูลเดียวกันบนเว็บไซต์ของคุณได้ บนลูกโลกและด้วยสีของคุณ Tracking Globe ทำได้ด้วยโค้ดชุดเดียวโดยไม่ต้องมีคีย์ API แผนที่ และเหมาะกับเว็บไซต์ส่วนใหญ่ แต่ไม่ใช่ทั้งหมด คู่มือนี้จะบอกว่าที่ไหนบ้าง
ประเด็นสำคัญ
- WordPress และ Shopify ใช้แท็ก script ได้ SharePoint Online ใช้ iframe ได้เมื่อเจ้าของไซต์อนุญาตโดเมน
- บน Taobao และ Tmall เรายืนยันวิธีรันวิดเจ็ตสดไม่ได้ ทางที่ทำได้จึงเป็นรูปภาพ
- วาดข้อมูลของคุณ หรือการจำลองที่มีป้ายบอกเสมอ ไม่ได้เชื่อมต่อกับผู้ขนส่ง
- ประมาณ 30 KB โหลดสองขั้น ไม่มีคุกกี้ ไม่มีการเรียกบุคคลที่สาม
การขนส่งจำลองในวิดเจ็ตจริง การจำลองมีป้ายที่มองเห็นได้เสมอ
สิ่งที่ทำได้ในแต่ละแพลตฟอร์ม
| แพลตฟอร์ม | วิธีติดตั้ง | ข้อจำกัด | สิ่งที่เราทดสอบ |
|---|
| เว็บไซต์ HTML ใดก็ได้ | แท็ก script และองค์ประกอบ | Content-Security-Policy ที่เข้มงวดต้องระบุโฮสต์ของสคริปต์ | เดสก์ท็อปและมือถือ วัดขนาดและการขยับของเลย์เอาต์แล้ว |
| WordPress | บล็อก Custom HTML หรือ shortcode จากปลั๊กอินเล็ก ๆ ของเรา | บทบาทที่ไม่มี unfiltered_html จะเสียโค้ด WordPress.com ต้องใช้แผนแบบชำระเงิน | ทดสอบมาร์กอัปของบล็อกในเบราว์เซอร์ และปลั๊กอินด้วย PHP ไม่ใช่การติดตั้งจริง |
| Shopify | ส่วน Custom Liquid หรือไฟล์ส่วนของธีม | ช่อง Rich text จะลบออก ร้าน headless ที่มีนโยบายของตัวเองต้องอนุญาตโฮสต์ | หน้าที่ใช้ส่วนหัวความปลอดภัยของร้านจริง ไม่ได้อยู่ในร้าน |
| SharePoint Online | Embed web part แบบ iframe | เจ้าของไซต์ต้องอนุญาตโดเมน สคริปต์ของหน้าไม่ทำงาน | iframe แบบ sandbox ภายใต้นโยบายเข้มงวด ไม่ใช่ tenant จริง |
| Taobao / Tmall | รูปภาพในพื้นที่รูปภาพของร้าน | ไม่มีวิดเจ็ตสดที่เรายืนยันได้ ลิงก์ภายนอกถูกจำกัด | การส่งออกรูปภาพเท่านั้น |
เพิ่มได้ในสี่ขั้นตอน
- เลือกข้อมูล เดโมจำลอง สเปรดชีตหรือ JSON ที่วาง หรือ URL ของคุณที่ส่งกลับ JSON ข้อมูลที่วางอ่านได้จากซอร์สของหน้า การขนส่งส่วนตัวจึงควรอยู่หลัง URL ข้อมูลหรือการค้นหาตามเลขอ้างอิง
- ปรับให้เข้ากับแบรนด์ สี โลโก้ ฟอนต์ ภาษา และความสูง สไตล์ชีตของคุณก็ตั้งค่าตัวแปรได้ เพื่อให้วิดเจ็ตตามธีมของเว็บไซต์
- กำหนดสิ่งที่ผู้เข้าชมควบคุมได้ การลาก ซูม การสลับลูกโลกกับแผนที่ รายการ การค้นหา คำอธิบาย และเต็มจอ ปิดแยกกันได้ ยกเว้นป้ายของการจำลอง
- คัดลอกโค้ดสำหรับแพลตฟอร์มของคุณ เครื่องมือตั้งค่าเขียนเวอร์ชันที่เหมาะกับแต่ละแพลตฟอร์ม รวมถึงโดเมนที่เจ้าของ SharePoint ต้องอนุญาต
ข้อมูลจริง โดยไม่ผ่านเซิร์ฟเวอร์ของเรา
เบราว์เซอร์ของผู้เข้าชมเรียก URL ของคุณโดยตรง ข้อมูลการขนส่งจึงไม่ผ่านเรา URL นั้นต้องอนุญาตคำขอข้ามต้นทาง และต้องมีกฎการเข้าถึงของตัวเองหากข้อมูลเป็นส่วนตัว แถวข้อมูลรับชื่อที่ผู้ขนส่งและสเปรดชีตมักใช้ เช่น tracking_number, origin, destination, eta, latitude และ longitude URL ค้นหาที่มี {id} ส่งกลับทีละเลขอ้างอิง ลูกค้าจึงเห็นเฉพาะการขนส่งของตน
ผลกระทบต่อหน้าเว็บ
ตัวโหลด 3 KB จองพื้นที่ไว้ หน้าจึงไม่กระโดด เอนจิน 27 KB โหลดเมื่อแผนที่อยู่ห่างจากหน้าจอ 300 px หรือเมื่อคลิกหากต้องการ ในหน้าทดสอบบนเดสก์ท็อปและมือถือจำลอง การขยับของเลย์เอาต์เป็นศูนย์ และเอนจินไม่โหลดจนกว่าจะเลื่อนเข้าไปใกล้ นอกหน้าจอจะหยุดวาด ลูกกลิ้งยังเลื่อนหน้าเว็บเว้นแต่กด Ctrl หรือ ⌘ และการตั้งค่าลดการเคลื่อนไหวจะหยุดการหมุน แผนที่โลกอยู่ในไฟล์ IP ของผู้เข้าชมจึงไม่ถูกส่งให้ผู้ให้บริการแผนที่
จุดที่คำตอบคือไม่ได้หรือยังไม่ได้
WordPress ลบ iframe และสคริปต์ของผู้ใช้ที่ไม่มีสิทธิ์ unfiltered_html[wp] และ WordPress.com อนุญาตเฉพาะแผนแบบชำระเงิน[wpcom] SharePoint มีรายการอนุญาตต่อไซต์[sp] และเราไม่ได้สร้าง SPFx web part ซึ่งต้องใช้แค็ตตาล็อกแอปของ tenant สำหรับ Taobao แหล่งที่เป็นทางการที่สุดที่เราพบ[taobao]เป็นฉบับร่างเก่า จึงควรสอบถามแพลตฟอร์มก่อนเชื่อถือ สำหรับผู้ซื้อในจีน ให้โฮสต์สองไฟล์นี้บนเซิร์ฟเวอร์ที่นั่น เรายังไม่ได้วัดการโหลดเว็บไซต์นี้จากจีน
วิธีฝังแผนที่ติดตามการขนส่งในเว็บไซต์: WordPress, Shopify, SharePoint และ Taobao