Bản đồ

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 kho hàng (tức là loại phòng, phòng họp, spa, v.v.) hoặc một bộ sưu tập kho hàng như danh sách được tuyển chọn hoặc tìm kiếm đã lưu và hiển thị các chi tiết đó qua một bản đồ tương tác chứa các điểm đánh dấu có thể đặt được. Người dùng có thể tương tác với bản đồ theo các cách sau:

Thu phóng, di chuyển và kéo bản đồ để xem kho hàng có sẵn.
Nhấp vào một điểm đánh dấu trên bản đồ để xem chi tiết kho hàng dưới dạng Card.

Bản đồ với thẻ mở — *Bản đồ với kho hàng có thể đặt đượ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 bạn.

Tạo bản đồ

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

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

Bản đồ một điểm đánh dấu

Hình trên được lấy từ Tìm kiếm và cho bạn thấy một số việc 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à Tạo bản đồ. Nhấp vào nút đó và nó sẽ chuyển hướng bạn đế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ả danh sách được tuyển chọn và tìm kiếm đã lưu đều có 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 cho tất cả kho hàng trong các danh sách đó.

Tùy chỉnh bản đồ

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

Đặt tên để bạn nhớ bản đồ nói về điều gì.
Chọn xem bạn có muốn người dùng được phép di chuyển bản đồ hay không.
Đặt chiều cao, tính bằng pixel, mà bạn muốn bản đồ có.
Chọn xem bạn có muốn người dùng được phép thu phóng 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 điểm đánh dấu.
Chọn mặt thẻ ban đầu mà bạn muốn người dùng thấy trước tiên. Mặc định là mặt gốc của kho hàng đó.
Bạn có thể thêm các điểm đánh dấu, vòng tròn, hình chữ nhật và đa giác của riêng bạn để chỉ các vị trí khác trên bản đồ mà người dùng có thể thấy thú vị.
Nhấp nút Lưu để tiếp tục.

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

Chia sẻ bản đồ

Hình trên cho bạn thấy tất cả các hành động có sẵn cho bản đồ của bạn:

Cập nhật Cập nhật cấu hình bản đồ của bạn.
Thêm vào WinkLinks Thêm bản đồ vào tài khoản WinkLinks của bạn.
Nhúng Cho bạn biết cách nhúng bản đồ này như một Map vào trang web của bạn.
Sử dụng với WordPress Hướng dẫn bạn cách sử dụng plugin WordPress của chúng tôi để 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 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>

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

Dòng 3 cho bạn thấy cách nhúng các kiểu của Wink vào trang web.
Các dòng 6 đến 9 cho bạn thấy cách sử dụng wink-content-loader Web Component và yêu cầu nó lấy banner quảng cáo cho mã của bạn.
Dòng 11 cho bạn thấy cách nhúng Javascript của chúng tôi vào trang web.
Dòng 13 cho bạn thấy cách nhúng wink-app-loader Web Component và yêu cầu nó lấy các tùy chọn cấu hình cấp trang của bạn.

API

Các nhà phát triển muốn quản lý bản đồ có thể truy cập Developers > API > Inventory.

Đọc thêm

Tìm hiểu thêm về bộ sưu tập Web Components.
Tìm hiểu thêm về plugin WordPress của Wink.