Maps

Bản đồ đại diện cho một nhà cung cấp duy nhất (ví dụ: khách sạn hoặc nhà cung cấp trải nghiệm) hoặc hàng tồn kho (tức là loại phòng, phòng họp, spa, v.v.) hoặc một bộ sưu tập hàng tồn kho như danh sách được quản lý hoặc tìm kiếm đã lưu và hiển thị các chi tiết đó thông qua bản đồ tương tác có chứa các điểm đánh dấu bản đồ có thể đặt trước. Người dùng có thể tương tác với bản đồ theo những cách sau:

Phóng to, di chuyển và kéo bản đồ để xem hàng tồn kho có sẵn.
Nhấp vào điểm đánh dấu bản đồ để xem thông tin chi tiết về hàng tồn kho dưới dạngThẻ.

Bản đồ có thẻ mở — *Bản đồ có hàng tồn kho có thể đặt trước*

Phần còn lại của bài viết này sẽ hướng dẫn bạn cách tạo, tùy chỉnh và chia sẻ bản đồ của mình.

Tạo bản đồ

Bản đồ có thể được tạo theo hai cách:

Bản đồ đánh dấu đơn: Tạo một bản đồ từ thứ bạn tìm thấy trong khitìm kiếm.
Bản đồ nhiều điểm đánh dấu: Tạo bản đồ từ mộtdanh sách được tuyển chọn hoặc tìm kiếm đã lưu.

Bản đồ đánh dấu đơn

Phía trên là hình ảnh được chụp từTìm kiếmvà cho bạn thấy một số điều bạn có thể làm với kết quả tìm kiếm của mình. Một trong những hành động đó làMake a map. Nhấp vào nút đó và bạn sẽ được chuyển hướng đến trang biểu mẫu bản đồ nơi bạn có thể bắt đầu tùy chỉnh bản đồ của mình.

Bản đồ nhiều điểm đánh dấu

Cả hai danh sách được tuyển chọn Và tìm kiếm đã lưuđi kèm với một hành động cho phép bạn tạo bản đồ. Bản đồ này sẽ chứa các điểm đánh dấu bản đồ cho tất cả hàng tồn kho trong các danh sách đó.

Tùy chỉnh bản đồ

Biểu mẫu này cho phép bạn tùy chỉnh bản đồ theo những cách sau:

Đặt tên cho bản đồ để bạn nhớ nội dung của nó.
Chọn xem bạn có muốn người dùng được phép di chuyển xung quanh bản đồ hay không.
Thiết lập chiều cao theo pixel mà bạn muốn bản đồ có được.
Chọn xem bạn có muốn cho phép người dùng phóng to hoặc thu nhỏ bản đồ hay không.
Chọn kiểu bản đồ phù hợp với trang web mà bạn sẽ nhúng bản đồ vào.
Chọn màu đánh dấu.
Chọn mặt thẻ ban đầu mà bạn muốn người dùng nhìn thấy đầu tiên. Theo mặc định, đó là mặt gốc của kho đó.
Bạn có thể thêm các điểm đánh dấu, hình tròn, hình chữ nhật và đa giác của riêng mình để chỉ ra các vị trí khác trên bản đồ mà người dùng có thể thấy thú vị.
Nhấp vào Save nút để tiếp tục.

Sau khi lưu bản đồ, bạn sẽ được chuyển hướng đến trang bản đồ và bản đồ của bạn đã sẵn sàng để chia sẻ với thế giới.

Chia sẻ bản đồ

Phía trên hiển thị cho bạn hình ảnh với tất cả các hành động có sẵn cho bản đồ của bạn:

Cập nhậtCập nhật cấu hình bản đồ của bạn.
Thêm vào WinkLinksThêm bản đồ vào tài khoản WinkLinks của bạn.
NhúngHiển thị cho bạn cách nhúng bản đồ này dưới dạngBản đồvào trang web của bạn.
Sử dụng với WordPressHiển thị cho bạn cách sử dụng của chúng tôiTiện ích bổ sung WordPressđể nhúng bản đồ này vào trang web của bạn.

Chúng tôi sẽ trình bày chi tiết hơn về một số tùy chọn này ở phần bên dưới.

Nhúng

<html>
  <head>
    <link rel="stylesheet" href="https://elements.wink.travel/styles.css"></link>
  </head>
  <body>
    <wink-content-loader
       layout="MAP"
       id="64d7cbc8-61df-11ef-9722-42004e494300"
    ></wink-content-loader>

    <script src="https://elements.wink.travel/elements.js" type="module" defer></script>

    <wink-app-loader
      client-id="YOUR CLIENT ID GOES HERE"
      configuration-id="YOUR CUSTOMIZATION ID GOES HERE"
    ></wink-app-loader>
  </body>
</html>

Sau đây là cách nhúng bản đồ vào trang web của bạn:

Dòng 3 cho bạn biết cách nhúng kiểu Wink vào trang web của bạn.
Dòng 6 đến 9 cho bạn thấy cách sử dụngnháy mắt-nội dung-loaderThành phần Web và yêu cầu nó lấy biểu ngữ quảng cáo cho mã của bạn.
Dòng 11 hướng dẫn bạn cách nhúng Javascript vào trang web của bạn.
Dòng 13 cho bạn thấy cách nhúngwink-app-loaderThành phần Web và yêu cầu nó lấy tùy chọn cấu hình cấp trang của bạn.

Giao diện lập trình ứng dụng (API)

Các nhà phát triển muốn quản lý bản đồ có thể truy cậpNhà phát triển > API > Hàng tồn kho.

Đọc thêm

Tìm hiểu thêm về bộ sưu tập của chúng tôiThành phần Web.
Tìm hiểu thêm vềTiện ích mở rộng Wink WordPress.