Bạn đang xem : google maps style infowindow

Chọn nền tảng:

Android
iOS
JavaScript

Giới thiệu

Một
InfoWindow
hiển thị nội dung (thường là văn bản hoặc hình ảnh) trong một
cửa sổ bật lên phía trên bản đồ, tại một vị trí nhất định. Cửa sổ thông tin có một nội dung
diện tích và một thân thuôn nhọn. Đầu của thân cây được gắn với một
vị trí trên bản đồ. Cửa sổ thông tin xuất hiện dưới dạng Hộp thoại tới trình đọc màn hình.

Thông thường, bạn sẽ đính kèm một cửa sổ thông tin vào một
điểm đánh dấu , nhưng bạn cũng có thể
đính kèm một cửa sổ thông tin vào một vĩ độ / kinh độ cụ thể, như được mô tả trong
phần thêm cửa sổ thông tin bên dưới .

Nói rộng ra, cửa sổ thông tin là một loại lớp phủ. Để biết thông tin về
các loại lớp phủ khác, xem
Vẽ trên bản đồ .

Gợi ý: Nếu bạn muốn hiển thị một
ký tự văn bản trên một điểm đánh dấu, bạn có thể sử dụng
điểm đánh dấu
nhãn
.

Mẹo: Kiểm tra
Giải pháp định vị cửa hàng
để biết thêm ví dụ về việc sử dụng cửa sổ thông tin.

Thêm cửa sổ thông tin


Hàm tạo InfoWindow
nhận một

Chữ đối tượng InfoWindowOptions
, chỉ định phần đầu
các tham số để hiển thị cửa sổ thông tin.

Chữ đối tượng InfoWindowOptions
chứa các trường sau:

  • content chứa một chuỗi văn bản hoặc một nút DOM
    để hiển thị trong cửa sổ thông tin.
  • pixelOffset chứa phần bù từ phần đầu của thông tin
    cửa sổ đến vị trí mà cửa sổ thông tin được neo vào. Trong thực tế,
    bạn không cần phải chỉ định trường này. Bạn có thể để mặc định
    giá trị.
  • position chứa LatLng chứa thông tin này
    cửa sổ được neo. Lưu ý: Có thể đính kèm InfoWindow
    đến một đối tượng Marker (trong trường hợp đó, vị trí của nó dựa trên
    vị trí của điểm đánh dấu) hoặc trên bản đồ tại một LatLng được chỉ định.
    Một cách để truy xuất LatLng là bằng cách sử dụng
    Dịch vụ mã hóa địa lý .
    Mở cửa sổ thông tin trên một điểm đánh dấu sẽ tự động cập nhật
    vị trí .
  • maxWidth chỉ định chiều rộng tối đa của thông tin
    cửa sổ tính bằng pixel. Theo mặc định, một cửa sổ thông tin sẽ mở rộng để phù hợp với nội dung của nó,
    và tự động kết thúc văn bản nếu cửa sổ thông tin lấp đầy bản đồ. nếu bạn
    thêm maxWidth thì cửa sổ thông tin sẽ tự động đóng gói để thực thi
    chiều rộng được chỉ định. Nếu nó đạt đến chiều rộng tối đa và có chiều dọc
    trên màn hình, cửa sổ thông tin có thể mở rộng theo chiều dọc.
XEM THÊM  Số điện thoại dịch vụ khách hàng WordPress? 3 cách để có được nó (2018) - số dịch vụ khách hàng của wordpress.org

Nội dung của InfoWindow có thể chứa một chuỗi văn bản,
đoạn mã HTML hoặc phần tử DOM. Để đặt nội dung, hãy chỉ định nó
trong InfoWindowOptions hoặc gọi
setContent () trên InfoWindow một cách rõ ràng.

Nếu bạn muốn định cỡ nội dung một cách rõ ràng, bạn có thể đặt nó vào
& lt; div & gt; phần tử và tạo kiểu cho & lt; div & gt; với
CSS. Bạn cũng có thể sử dụng CSS để kích hoạt tính năng cuộn. Lưu ý rằng nếu bạn không
cho phép cuộn và nội dung vượt quá không gian có sẵn trong thông tin
, nội dung có thể tràn ra ngoài cửa sổ thông tin.

Các phương pháp hay nhất: Dành cho người dùng tốt nhất
kinh nghiệm, chỉ một cửa sổ thông tin sẽ được mở trên bản đồ cùng một lúc.
Nhiều cửa sổ thông tin làm cho bản đồ trông lộn xộn. Nếu bạn chỉ cần một thông tin
tại một thời điểm, bạn chỉ có thể tạo một đối tượng InfoWindow
mở nó ở các vị trí hoặc điểm đánh dấu khác nhau theo các sự kiện bản đồ, chẳng hạn như người dùng
số lần nhấp chuột. Nếu bạn cần nhiều cửa sổ thông tin, bạn có thể hiển thị nhiều
Các đối tượng InfoWindow cùng một lúc.

Mở cửa sổ thông tin

Khi bạn tạo một cửa sổ thông tin, cửa sổ này không tự động hiển thị trên bản đồ.
Để hiển thị cửa sổ thông tin, bạn phải gọi phương thức open ()
trên InfoWindow , chuyển InfoWindowOpenOptions
đối tượng theo nghĩa đen chỉ định các tùy chọn sau:

  • map chỉ định bản đồ hoặc ảnh toàn cảnh Chế độ xem phố để mở.
  • anchor chứa một điểm neo (ví dụ: Marker ).
    Nếu tùy chọn anchor null hoặc không xác định, thông tin
    cửa sổ sẽ mở tại thuộc tính position của nó.
  • shouldFocus chỉ định xem có nên di chuyển tiêu điểm hay không
    bên trong cửa sổ thông tin khi nó được mở.

TypeScript

 // Ví dụ này hiển thị một điểm đánh dấu ở trung tâm của Úc.
// Khi người dùng nhấp vào điểm đánh dấu, một cửa sổ thông tin sẽ mở ra.

function initMap (): void {
  const uluru = {lat: -25.363, lng: 131.044};
  const map = new google.maps.Map (
    document.getElementById ("map") dưới dạng HTMLElement,
    {
      thu phóng: 4,
      trung tâm: uluru,
    }
  );

  const contentString =
    '& lt; div id = "content" & gt;' +
    '& lt; div id = "siteNotice" & gt;' +
    "& lt; / div & gt;" +
    '& lt; h1 id = "firstHeading" class = "firstHeading" & gt; Uluru & lt; / h1 & gt;' +
    '& lt; div id = "bodyContent" & gt;' +
    "& lt; p & gt; & lt; b & gt; Uluru & lt; / b & gt ;, còn được gọi là & lt; b & gt; Ayers Rock & lt; / b & gt ;, là một khối lớn" +
    "sự hình thành đá sa thạch ở phần phía nam của" +
    "Lãnh thổ phía Bắc, miền trung Australia. Nó nằm 335 & amp; # 160; km (208 & amp; # 160; mi)" +
    "phía tây nam của thị trấn lớn gần nhất, Alice Springs; 450 & amp; # 160; km" +
    "(280 & amp; # 160; mi) bằng đường bộ. Kata Tjuta và Uluru là hai chính" +
    "đặc điểm của Vườn quốc gia Uluru - Kata Tjuta. Uluru là" +
    "thiêng liêng đối với Pitjantjatjara và Yankunytjatjara," +
    "Những người thổ dân trong khu vực. Nơi đây có nhiều suối, hố nước," +
    "hang động đá và những bức tranh cổ. Uluru được xếp vào danh sách một Thế giới" +
    "Địa điểm Di sản. & Lt; / p & gt;" +
    '& lt; p & gt; Ghi công: Uluru, & lt; a href = "https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194" & gt;' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a>" +
    "(truy cập lần cuối vào ngày 22 tháng 6 năm 2009). & lt; / p & gt;" +
    "& lt; / div & gt;" +
    "& lt; / div & gt;";

  const infowindow = new google.maps.InfoWindow ({
    nội dung: contentString,
  });

  const marker = new google.maps.Marker ({
    vị trí: uluru,
    bản đồ,
    tiêu đề: "Uluru (Ayers Rock)",
  });

  marker.addListener ("click", () = & gt; {
    infowindow.open ({
      anchor: marker,
      bản đồ,
      shouldFocus: false,
    });
  });
}

khai báo toàn cầu {
  giao diện Window {
    initMap: () = & gt; vô hiệu;
  }
}
window.initMap = initMap;  index.ts  

Lưu ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

XEM THÊM  8 Plugin WordPress Nhập / Xuất tốt nhất - wp tất cả xuất plugin

JavaScript

 // Ví dụ này hiển thị một điểm đánh dấu ở trung tâm của Úc.
// Khi người dùng nhấp vào điểm đánh dấu, một cửa sổ thông tin sẽ mở ra.
function initMap () {
  const uluru = {lat: -25.363, lng: 131.044};
  const map = new google.maps.Map (document.getElementById ("bản đồ"), {
    thu phóng: 4,
    trung tâm: uluru,
  });
  const contentString =
    '& lt; div id = "content" & gt;' +
    '& lt; div id = "siteNotice" & gt;' +
    "& lt; / div & gt;" +
    '& lt; h1 id = "firstHeading" class = "firstHeading" & gt; Uluru & lt; / h1 & gt;' +
    '& lt; div id = "bodyContent" & gt;' +
    "& lt; p & gt; & lt; b & gt; Uluru & lt; / b & gt ;, còn được gọi là & lt; b & gt; Ayers Rock & lt; / b & gt ;, là một khối lớn" +
    "sự hình thành đá sa thạch ở phần phía nam của" +
    "Lãnh thổ phía Bắc, miền trung Australia. Nó nằm 335 & amp; # 160; km (208 & amp; # 160; mi)" +
    "phía tây nam của thị trấn lớn gần nhất, Alice Springs; 450 & amp; # 160; km" +
    "(280 & amp; # 160; mi) bằng đường bộ. Kata Tjuta và Uluru là hai chính" +
    "đặc điểm của Vườn quốc gia Uluru - Kata Tjuta. Uluru là" +
    "thiêng liêng đối với Pitjantjatjara và Yankunytjatjara," +
    "Những người thổ dân trong khu vực. Nơi đây có nhiều suối, hố nước," +
    "hang động đá và những bức tranh cổ. Uluru được xếp vào danh sách một Thế giới" +
    "Địa điểm Di sản. & Lt; / p & gt;" +
    '& lt; p & gt; Ghi công: Uluru, & lt; a href = "https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194" & gt;' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a>" +
    "(truy cập lần cuối vào ngày 22 tháng 6 năm 2009). & lt; / p & gt;" +
    "& lt; / div & gt;" +
    "& lt; / div & gt;";
  const infowindow = new google.maps.InfoWindow ({
    nội dung: contentString,
  });
  const marker = new google.maps.Marker ({
    vị trí: uluru,
    bản đồ,
    tiêu đề: "Uluru (Ayers Rock)",
  });

  marker.addListener ("click", () = & gt; {
    infowindow.open ({
      anchor: marker,
      bản đồ,
      shouldFocus: false,
    });
  });
}

window.initMap = initMap;  index.js  

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

Xem ví dụ

Thử mẫu

Stackblitz.com
CodeSandbox.io
JSFiddle.net
GitPod.io
Google Cloud Shell

Ví dụ sau đặt maxWidth của cửa sổ thông tin:
xem ví dụ .

Đặt tiêu điểm vào cửa sổ thông tin

Để đặt tiêu điểm trên cửa sổ thông tin, hãy gọi focus () của cửa sổ đó
phương pháp. Cân nhắc sử dụng phương pháp này cùng với hiển thị
sự kiện trước khi thiết lập tiêu điểm. Gọi phương thức này trên một thông tin không hiển thị
cửa sổ sẽ không có hiệu lực. Gọi open () tới
hiển thị một cửa sổ thông tin.

Đóng cửa sổ thông tin

Theo mặc định, cửa sổ thông tin vẫn mở cho đến khi người dùng nhấp vào đóng
điều khiển (dấu gạch chéo ở trên cùng bên phải của cửa sổ thông tin) hoặc nhấn phím ESC.
Bạn cũng có thể đóng cửa sổ thông tin một cách rõ ràng bằng cách gọi close () của nó
phương pháp.

Khi cửa sổ thông tin đóng, tiêu điểm sẽ di chuyển trở lại phần tử đã ở trong
tiêu điểm trước khi cửa sổ thông tin được mở. Nếu phần tử đó không có sẵn,
tiêu điểm được chuyển trở lại bản đồ. Để ghi đè hành vi này, bạn có thể nghe
sự kiện Closeeclick và quản lý tiêu điểm theo cách thủ công như được hiển thị trong
ví dụ sau:

infoWindow.addListener ('Closeeclick', () = & gt; {
  // Xử lý tiêu điểm theo cách thủ công.
});

Di chuyển cửa sổ thông tin

Có một số cách để thay đổi vị trí của cửa sổ thông tin:

  • Gọi setPosition () trên cửa sổ thông tin hoặc
  • Đính kèm cửa sổ thông tin vào một điểm đánh dấu mới bằng cách sử dụng
    Phương thức InfoWindow.open () . Lưu ý: Nếu bạn gọi open ()
    mà không cần chuyển một điểm đánh dấu, InfoWindow sẽ sử dụng vị trí
    được chỉ định khi xây dựng thông qua
    Đối tượng InfoWindowOptions .

Tùy chỉnh

Lớp InfoWindow không cung cấp tùy chỉnh. Thay vì,
xem
tùy chỉnh
ví dụ bật lên

để xem cách tạo một cửa sổ bật lên được tùy chỉnh hoàn toàn.

XEM THÊM  Nhiều cách để đưa CSS vào các ứng dụng JavaScript | Thủ thuật CSS - chèn tệp css bằng javascript


Xem thêm những thông tin liên quan đến chủ đề google maps style infowindow

Google Maps JavaScript API Episode 4 – Info Windows

  • Tác giả: WittCode
  • Ngày đăng: 2021-11-08
  • Đánh giá: 4 ⭐ ( 4573 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video series, we will be learning about the Google Maps JavaScript API. We will learn everything about the Google Maps JavaScript API ranging from creating a custom Google map to adding symbols, shapes, and more! In this video, we will learn how to add an info window to our map, work with an info window, and attach an info window to a marker.

    👩‍💻Download Code👨‍💻
    https://wittcode.com/

    💙Support me💙
    https://www.paypal.com/donate?business=7PR9242DESP8L&no_recurring=0&item_name=Help+me+continue+to+teach+others+how+to+program%21&currency_code=USD

    ❌Disclaimer❌
    I may receive commission for purchases made through these Amazon affiliate links.
    ☕How I learned Java☕
    https://amzn.to/3I2XaEP
    📚How I learned JavaScript📚
    https://amzn.to/3cUYfzU
    🎙My Mic🎙
    https://amzn.to/2ZBrcxO
    🟩My Green Screen🟩
    https://amzn.to/3BompwG
    🎥My Camera🎥
    https://amzn.to/3EFNOMP

    ⌚Timestamps⌚
    0:00 – What is an InfoWindow
    0:48 – Adding an InfoWindow to Google Map
    4:13 – Anchoring an InfoWindow to a Marker
    5:55 – ShouldFocus Option
    6:50 – Anchor Option Vs InfoWindow Position
    7:28 – PixelOffset Option
    9:01 – MaxWidth Option
    10:16 – SetContent Method
    10:58 – Closing an InfoWindow
    13:17 – Moving an InfoWindow
    14:19 – Moving InfoWindow to a Different Marker
    17:09 – Creating a Custom InfoWindow
    19:37 – Outro

Styling Wizard: Google Maps APIs

  • Tác giả: mapstyle.withgoogle.com
  • Đánh giá: 5 ⭐ ( 9820 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Customize colors, roads, labels, and more.
    Then use your custom style in your Google Maps Platform project.

Add Style to InfoWindow on Google Maps

  • Tác giả: www.techstrikers.com
  • Đánh giá: 4 ⭐ ( 5786 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

How to style the Google maps popup infowindow

  • Tác giả: codeshare.co.uk
  • Đánh giá: 5 ⭐ ( 8733 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

How to customize info window in Google Maps

  • Tác giả: www.wpmapspro.com
  • Đánh giá: 3 ⭐ ( 5903 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this article, we will teach you how to customize information windows in Google Maps. This will allow you to customize the plugin to your desires and ideas.

Styling Google Maps InfoWindow

  • Tác giả: stackoverflow.com
  • Đánh giá: 4 ⭐ ( 8559 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

React Google Maps Api Style Guide

  • Tác giả: react-google-maps-api-docs.netlify.app
  • Đánh giá: 3 ⭐ ( 7282 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: WordPress

By DEVTEAM