Các phương pháp hay nhất về JS
API JavaScript của Maps chỉ hoạt động với ECMAScript và W3C DOM chuẩn môi trường. Điều này có nghĩa là việc sửa đổi hoặc ghi đè hành vi của tiện ích tích hợp sẵn các lớp và đối tượng do trình duyệt cung cấp có thể làm cho 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 JavaScript của Maps 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ột API chuẩn Môi trường ECMAScript. API JavaScript của Maps không tương thích với các API đó thư viện.
Các thư viện được xác định là không tương thích với API JavaScript của Maps:
- Nguyên mẫu: ghi đè
Array.from()
vàElement.prototype.remove()
theo cách không chuẩn. - MooTools (phiên bản cũ): ghi đè
Array.from()
theo cách không chuẩn. - DateJS (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 để loại bỏ 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 Maps JavaScript, một số kiểu bạn áp dụng cho trang web của mình 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 để tạo kiểu, thao tác này có thể thêm CSS bổ sung xung đột với kiểu bản đồ của bạn.
Khung CSS và thành phần định kiểu JavaScript thường sử dụng tính năng đặt lại CSS hoặc
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
dùng phần tử box-sizing
để điều chỉnh lề và đường viền trang web
phần tử. 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ừ việc sử dụng
content-box
thành border-box
.
Hình thức đặt lại CSS này có thể gây ra xung đột CSS với API JavaScript của Maps vì API này không hỗ trợ thay đổi biểu định kiểu tác nhân người dùng. Thông tin khác Xung đột CSS 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 Cá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 để bạn 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 khi 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 làm theo quy tắc cụ thể để đảm bảo rằng 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 như img
, button
và a
có thể được ghi đè bằng
kiểu nào trên trang của bạn. Một trong những trường hợp phổ biến nhất là khi max-width
của phần tử img
được đặt thành 100%. Điều này có thể khiến
hình ảnh bị méo
hoặc các thành phần bản đồ bị ẩn, đặc biệt là khi bạn đang sử dụng
InfoWindow (Cửa sổ thông tin).
Để khắc phục vấn đề này, bạn có thể cập nhật phần tử img
cho bản đồ của mình để
Thuộc tính max-width
được đặt thành none
. Ví dụ:
#map img
{
max-width : none;
}
Tên lớp
Không tham chiếu tên lớp và các phần tử DOM nội bộ của Bản đồ JavaScript API. Phương thức 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 của bạn mà không cần thông báo. Thay vào đó, bạn nên tạo các lớp CSS của riêng mình làm vùng chứa cho bản đồ của mình.
Nếu khung CSS hoặc thành phần JavaScript sử dụng các loại tham chiếu này, đề xuất ghi đè kích thước hộp có thể đóng vai trò là giải pháp.
Ghi đè kích thước hộp CSS
Tính năng ghi đè kích thước hộp CSS cung cấp giải pháp khả thi cho việc tạo kiểu bản đồ
xung đột. Điều 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ử các cách sau:
- Tạo chế độ ghi đè
box-sizing
để đặt 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 sẽ đặ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;
}