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 sẵn 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 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 tiêu chuẩn. API JavaScript của Maps không tương thích với các thư viện đó.

Các thư viện được biết 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 (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 để tạo kiểu, thì việc này có thể thêm xung đột CSS với kiểu bản đồ của bạn.

Khung CSS và các thành phần tạo kiểu JavaScript thường sử dụng tính năng đặ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 để điều chỉnh tỷ lệ lề và đường viền của các phần tử trang web. Việc 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ừ việc sử dụng content-box sang border-box.

Loại đặ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ợ các thay đổi đối với tệp kiểu của 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 các phần tử DOM của API JavaScript của Maps.

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

Mức độ cụ thể

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

Kiểu trang của bạn có thể ghi đè các phần tử CSS phổ biến như img, button và a. 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 bị ẩ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 đồ để đặt thuộc tính max-width 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 API Bản đồ JavaScript. Việc này không được hỗ trợ và có thể gây ra các thay đổi có thể gây lỗi trong 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 bạn.

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à 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 một giải pháp có thể áp dụng cho các xung đột về kiểu bản đồ. Đ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ử làm như sau:

  • Tạo 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;
}