Các phương pháp hay nhất

Các phương pháp hay nhất về JS

API JavaScript của Maps chỉ hoạt động với môi trường ECMAScript và W3C DOM tiêu chuẩn. Điều này có nghĩa là việc sửa đổi hoặc ghi đè hành vi của các lớp và đối tượng tích hợp do trình duyệt cung cấp có thể khiến API JavaScript của Maps không hoạt động. Đôi khi, các thư viện khác có thể xung đột với Maps JavaScript API bằng cách thay đổi hành vi của trình duyệt để trình duyệt không còn là môi trường ECMAScript tiêu chuẩn nữa. Maps JavaScript API không tương thích với các thư viện đó.

Các thư viện không tương thích với Maps JavaScript API:

  • Nguyên mẫu: ghi đè Array.from() và Element.prototype.remove() theo cách không chuẩn.
  • MooTools (các phiên bản cũ): ghi đè Array.from() theo cách không chuẩn.
  • DateJS (các phiên bản cũ): ghi đè Date.now() theo cách không chuẩn.

Đôi khi, bạn có thể sửa đổi các thư viện không tương thích để xoá các phương thức ghi đè không chuẩn.

Các phương pháp hay nhất về CSS

Khi bạn thêm hoặc tuỳ chỉnh bản đồ bằng Maps JavaScript API, một số kiểu mà bạn áp dụng cho trang web có thể ghi đè kiểu bản đồ và gây ra xung đột CSS. Nếu bạn sử dụng một khung CSS hoặc một thành phần JavaScript để tạo kiểu, thì điều này có thể làm tăng thêm các xung đột CSS với kiểu bản đồ của bạn.

Các thành phần tạo kiểu JavaScript và khung CSS thường sử dụng một chế độ đặt lại CSS hoặc một trình chuẩn hoá để xử lý sự khác biệt về kết xuất giữa các trình duyệt. Các khung thường sử dụng phần tử box-sizing để điều chỉnh tỷ lệ lề và đường viền của các phần tử trang web. Điều này thường liên quan đến việc thay đổi hành vi mặc định của trình duyệt từ sử dụng content-box sang border-box.

Loại CSS đặt lại này có thể gây ra xung đột CSS với Maps JavaScript API vì API này không hỗ trợ các thay đổi đối với biểu định kiểu tác nhân người dùng. Các xung đột CSS khác có thể xảy ra nếu khung hoặc thành phần tham chiếu đến các lớp CSS hoặc phần tử DOM của Maps JavaScript API.

Để tránh những xung đột này, bạn nên cân nhắc một số đề xuất của chúng tôi.

Mức độ cụ thể

CSS được nhúng và liên kết sẽ được áp dụng cho bản đồ của bạn trước các kiểu của Google Maps. Nếu tất cả kiểu trang của bạn được xác định trong CSS được liên kết hoặc nhúng, hãy tuân theo các quy tắc cụ thể để đảm bảo rằng các kiểu chính xác được áp dụng cho bản đồ của bạn.

Các phần tử CSS phổ biến, chẳng hạn như img, button và a có thể bị ghi đè bởi kiểu của trang. Một trong những trường hợp phổ biến nhất là khi thuộc tính max-width của phần tử img được đặt thành 100%. Điều này có thể khiến các thành phần trên bản đồ bị biến dạng hoặc bị ẩn, đặc biệt là nếu bạn đang sử dụng InfoWindow.

Để khắc phục vấn đề này, bạn có thể cập nhật phần tử img cho bản đồ để thuộc tính max-width được đặt thành none. Ví dụ:

#map img
{
    max-width : none;
}

Tên lớp

Đừng tham chiếu tên lớp và các phần tử DOM nội bộ của JavaScript Maps API. Điều này không được hỗ trợ và có thể gây ra các thay đổi đột ngột trên trang web của bạn mà không có thông báo. Thay vào đó, bạn nên tạo các lớp CSS riêng làm vùng chứa cho bản đồ.

Nếu một khung CSS hoặc thành phần JavaScript sử dụng các loại tài liệu tham khảo này, thì đề xuất ghi đè box-sizing của chúng tôi có thể đóng vai trò là giải pháp tạm thời.

Ghi đè box-sizing CSS

Các chế độ ghi đè box-sizing của CSS cung cấp một giải pháp có thể khắc phục các xung đột về kiểu dáng của bản đồ. Điều này có thể đặc biệt hữu ích nếu bạn đang sử dụng một khung CSS hoặc thành phần tạo kiểu JavaScript. Ví dụ: nếu box-sizing được đặt thành border-box, hãy thử làm như sau:

  • Tạo một chế độ ghi đè box-sizing đặt phần tử <html> thành border-box.
  • Sử dụng box-sizing: inherit cho tất cả các phần tử khác ngoài bản đồ.
  • Tạo một vùng chứa bản đồ tuỳ chỉnh đặt lại phần tử box-sizing thành initial.

Ví dụ về CSS:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}