Phương pháp hay nhất về JS
API JavaScript của Maps chỉ hoạt động với môi trường DOM ECMAScript và W3C 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 mà trình duyệt cung cấp có thể khiến API JavaScript của Maps không hoạt động được. Đôi khi, các thư viện khác có thể xung đột với API JavaScript của Maps 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 chuẩn nữa. API JavaScript của Maps không tương thích với các thư viện đó.
Các thư viện đã được xác định là 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ũ hơn): 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 cơ chế ghi đè không theo 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 API JavaScript của Maps, một số kiểu 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 khung CSS hoặc thành phần JavaScript để định kiểu, thì việc này có thể tạo thêm các xung đột CSS khác với các kiểu bản đồ của bạn.
Khung CSS và các thành phần định kiểu JavaScript thường dùng chế độ đặt lại CSS hoặc 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
để mở rộng lề và đường viền của các phần tử trang web. Việc này thường bao gồm việc thay đổi hành vi mặc định của trình duyệt từ sử dụng content-box
thành border-box
.
Loại đặt lại CSS này có thể gây ra xung đột CSS với Maps JavaScript API vì API không hỗ trợ các thay đổi đối với biểu định kiểu tác nhân người dùng. Xung đột CSS bổ sung 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, chúng tôi có một số đề xuất để cân nhắc.
Mức độ cụ thể
CSS đã nhúng và liên kết được áp dụng cho bản đồ của bạn trước các kiểu Google Maps. Nếu tất cả kiểu trang của bạn được xác định trong CSS được nhúng hoặc liên kết, hãy tuân theo quy tắc về tính cụ thể để đảm bảo áp dụng đúng kiểu cho bản đồ của bạn.
Bạn có thể ghi đè các phần tử CSS phổ biến như img
, button
và a
bằng 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 bản đồ bị méo hoặc ẩn, đặc biệt là khi 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 API JavaScript Maps. Tính năng này không được hỗ trợ và có thể gây ra các thay đổi có thể gây lỗi trên trang web mà không thông báo trước. 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 đồ của mình.
Nếu một khung CSS hoặc thành phần JavaScript sử dụng các loại tệp tham chiếu này, thì đề xuất ghi đè kích thước hộp của chúng tôi có thể là một giải pháp.
Ghi đè kích thước hộp CSS
Tính năng ghi đè kích thước hộp CSS mang đến một giải pháp khả thi cho các xung đột định kiểu bản đồ. Việc này có thể đặc biệt hữu ích nếu bạn đang sử dụng khung CSS hoặc thành phần định kiểu JavaScript. Ví dụ: nếu box-sizing
được đặt thành border-box
, hãy thử như sau:
- Tạo một cơ chế ghi đè
box-sizing
để thiết lập phần tử<html>
thànhborder-box
. - Sử dụng
box-sizing: inherit
cho tất cả các thành phần khác ngoài bản đồ của bạn. - Tạo một vùng chứa bản đồ tuỳ chỉnh để đặt lại phần tử
box-sizing
thànhinitial
.
Ví dụ về CSS:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.container-map {
box-sizing: initial;
}