Nhúng website & Bảo mật
Nhúng bản đồ tương tác vào Webflow, WordPress, Shopify, Next.js hoặc các trang web tùy chỉnh. Bảo vệ hình ảnh của bạn với danh sách tên miền cho phép an toàn.
Phương pháp cài đặt: Script và iframe
Layerpin cung cấp cho bạn hai phương pháp cài đặt để xuất bản bản đồ tương tác của bạn trên bất kỳ trang web, CMS hoặc ứng dụng web nào. Cả hai phương pháp đều hỗ trợ khả năng phản hồi linh hoạt, chụm để thu phóng bằng cách chạm đa điểm và thay đổi kích thước vùng chứa động:
Một thẻ script tự khởi tạo duy nhất. Nó tự động đo chiều rộng vùng chứa, quản lý chiều cao khung nhìn động và ngăn sự thay đổi bố cục tích lũy mà không yêu cầu CSS tùy chỉnh.
<script src="https://layerpin.com/embed.v1.js?map=emb_YOUR_MAP_ID&width=100%25&height=640px&minHeight=320px&border=none"></script>Đoạn mã iframe được đóng hộp cát tiêu chuẩn. Lý tưởng cho các môi trường CMS nghiêm ngặt, hộp cát của bên thứ ba và các nền tảng hạn chế các thẻ JavaScript bên ngoài.
<iframe
src="https://layerpin.com/embed/emb_YOUR_MAP_ID"
title={t("Interactive map")}
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
allow="fullscreen"
allowfullscreen
style="display:block;width:100%;height:640px;min-height:320px;border:0;"
></iframe>Bảo vệ URL trực tiếp
Việc truy cập URL nhúng trực tiếp vào thanh địa chỉ của trình duyệt bị chặn theo thiết kế. Layerpin yêu cầu nguồn gốc đã được xác minh để hiển thị bản đồ một cách an toàn trong vùng chứa nhúng được ủy quyền.
Cài đặt sẵn chiều cao & Bố cục đáp ứng
Chiều rộng nhúng luôn kéo dài để lấp đầy 100% khối chứa nó. Bạn có thể chọn từ bốn cài đặt trước chiều cao được xác định trước hoặc chỉ định kích thước tùy chỉnh:
Thích hợp cho các cột thanh bên, tiện ích chi tiết sản phẩm và các phần chèn blog nhỏ gọn.
Mặc định cân bằng cho các trang đích, hướng dẫn và danh sách thư mục có chiều rộng đầy đủ.
Được thiết kế cho các bản thiết kế kiến trúc nhiều tầng, các chuyến tham quan khuôn viên trường và sơ đồ mật độ cao.
Lấp đầy toàn bộ khung nhìn trình duyệt trên thiết bị di động và máy tính để bàn, lý tưởng cho các ứng dụng khám phá bản đồ chuyên dụng.
Chế độ tải & Điều khiển trình xem
Định cấu hình cách tải bản đồ được nhúng và những điều khiển nào có sẵn cho khách truy cập:
Lười biếng (Mặc định): Defers map initialization until the visitor scrolls near the container, maximizing page speed scores. Háo hức: Tải ngay lập tức vào phân tích cú pháp HTML ban đầu cho các phần chính.
Bật nút mở rộng toàn màn hình bên trong trình xem. Khách truy cập có thể mở rộng bản đồ trên toàn bộ màn hình của họ để kiểm tra sâu mà không cần điều hướng khỏi trang web của bạn.
Chuyển đổi huy hiệu thuộc tính nền tảng bên trong trình xem được nhúng. Các gói trả phí có thể ẩn thương hiệu để có bản trình bày trực quan liền mạch, được dán nhãn trắng hoàn toàn.
Truyền tham số truy vấn ngôn ngữ (ví dụ: ?lang=ja) trong khung nội tuyến src to pre-select the locale on regional pages. Learn more in the Hướng dẫn đa ngôn ngữ.
Nguồn gốc và danh sách trắng tên miền được phép
Danh sách trắng tên miền đảm bảo bản đồ tương tác của bạn chỉ có thể được nhúng trên các trang web mà bạn phê duyệt. Các miền trái phép cố gắng iframe bản đồ của bạn sẽ nhận được thông báo từ chối truy cập.
Quy tắc bảo mật nguồn gốc
- Yêu cầu giao thức HTTPS: Embed origins require secure connections. Enter domains with or without protocol (e.g.,
https://mycompany.comormycompany.com). - Không có đường dẫn, truy vấn hoặc băm: Do not include subpaths or parameters (e.g., use
https://store.example.com, nothttps://store.example.com/map?view=1). - So khớp tên miền phụ ký tự đại diện (Cao cấp): Add
https://*.mycompany.comto authorize all staging branches, regional microsites, and dynamic subdomains under a single origin rule. - Chính sách giới thiệu nghiêm ngặt: Iframes must include
referencererpolicy="strict-origin-when-cross-origin"so the browser sends the parent origin header to our authorization validator.
Điều kiện tiên quyết để kích hoạt tính năng nhúng
Bản đồ phải được được xuất bản và có ít nhất một nguồn gốc hợp lệ được liệt kê trước khi có thể bật tính năng nhúng trang web.
Bản đồ thử nghiệm là bản nháp riêng tư và không thể được nhúng công khai cho đến khi gói bản đồ đang hoạt động được chọn.
Thu hồi và xoay ID nhúng
Nếu mã nhúng vô tình bị rò rỉ trong kho lưu trữ mã công khai hoặc quá trình chuyển giao của cơ quan bên ngoài hoàn tất, bạn có thể xoay mã thông báo ngay lập tức:
Trong thanh trạng thái trực tiếp ở phía bên phải của trang Cấu hình nhúng, hãy nhấp vào Tạo lại ID. Layerpin instantly creates a brand new unique embed token (e.g., nhúng_...).
Xem trước trực tiếp trên nhiều thiết bị
Kiểm tra trải nghiệm được nhúng trực tiếp ngay bên trong bảng điều khiển Layerpin trước khi xuất bản mã lên trang web sản xuất của bạn:
Mô phỏng màn hình máy tính để bàn tiêu chuẩn và chế độ xem màn hình rộng.
Kiểm tra bố cục iPad và máy tính bảng với ngăn kéo giao diện người dùng đáp ứng.
Xác thực điều hướng bằng cảm ứng, trang bật lên và chụm để thu phóng trên điện thoại.
Xem trước bảng điều khiển miễn phí
Số lần hiển thị bản đồ được tạo bên trong tab Xem trước trên trang tổng quan không được tính vào hạn mức lượt xem bản đồ hàng tháng của bạn. Bạn có thể kiểm tra các thay đổi về bố cục và kiểm tra các bộ lọc danh mục một cách tự do.
Trình tạo trang web & Hướng dẫn CMS
Bản đồ tương tác Layerpin hoạt động tự nhiên với tất cả các nhà xây dựng trang web lớn. Chọn nền tảng của bạn bên dưới để có các đề xuất thiết lập phù hợp:
Embed responsive interactive maps into WordPress using Gutenberg Custom HTML blocks, Classic Editor, Elementor, or Divi HTML widgets.
Embed interactive maps in Webflow Designer using the Custom Code Embed element with full support for fluid responsive containers.
Embed full-width or fixed-dimension interactive maps in Wix Studio and Wix Editor using the HTML Embed element.
Install responsive interactive maps into Squarespace 7.1 and Fluid Engine sections using Code blocks.
Add interactive maps directly into Framer canvases using the native Embed component with fluid responsiveness.
Insert responsive interactive maps into Ghost CMS publications, member pages, and posts using HTML cards.
Hướng dẫn chi tiết
Cần ảnh chụp màn hình từng bước cho Webflow, WordPress, Wix, Squarespace hoặc Framer?
Giới hạn xuất xứ & năng lực kế hoạch
Dung lượng gốc được phép và hỗ trợ ký tự đại diện được xác định bởi gói đăng ký đang hoạt động của bạn:
| Kế hoạch | Nguồn gốc được phép | Tên miền ký tự đại diện (*.) | Số lượt xem hàng tháng được bao gồm | Bản đồ đã xuất bản |
|---|---|---|---|---|
| Trial | Private only | Không được hỗ trợ | Draft testing only | 0 (Draft only) |
| Basic | 10 origins | Không được hỗ trợ | 5,000 views | 3 maps |
| Pro | 25 origins | Không được hỗ trợ | 25,000 views | 15 maps |
| Premium | 50 origins | Được hỗ trợ | 100,000 views | 50 maps |