2010-07-10 10 views
8

Tại sao trên thế giới luôn có cơ hội nếu chúng ta sử dụng "Doctype" với Google Maps, sẽ có vấn đề khi hiển thị Google Map chính xác?Google Map không hoạt động với XHTML Doctype (Loại tài liệu)

Trong trường hợp gần đây, "Doctype" này chỉ mất 2 ngày mà không có bất kỳ năng suất nào. Thật là một trường hợp kinh tởm? Lần này tôi nhận được sự giúp đỡ từ một đồng nghiệp của tôi (Subhankar Bannerjee), và rất cám ơn anh ấy vì sự giúp đỡ hiệu quả của anh ấy &. Ông cũng đề cập đến vấn đề tương tự này, mà ông đã phải đối mặt nhiều lần.

Bất cứ ai có thể vui lòng cho tôi biết lý do khiến sự cố Doctype này xảy ra với Google Map không?

Bất kỳ trợ giúp nào được đánh giá cao.

EDIT (đối với bình luận của @Balus): -
Tôi đã sử dụng (X) HTML 1.0 DOCTYPE Transitional, cho Mozilla FF & trình duyệt Google Chrome. Tôi chưa kiểm tra Bản đồ Google này trong IE v6 +, vì vậy tôi không thể nhận xét về các trình duyệt đó.

+1

Loại tài liệu nào chính xác? Webbrowsers nào chính xác? Bạn có biết (và hiểu) http://hsivonen.iki.fi/doctype/? – BalusC

+0

@Balus - Liên kết đẹp được cung cấp. Cảm ơn –

+2

http://stackoverflow.com/questions/2127601/doctype-error-with-googlemaps – iamgopal

Trả lời

16

Tôi đã gặp vấn đề tương tự với Google Maps API v3 một thời gian trước và tôi phải nói rằng không dễ để gỡ lỗi.

Điều ở đây là nếu bạn không sử dụng DOCTYPE trên trang của mình, trang sẽ được hiển thị ở chế độ quirks. Về cơ bản, điều này cho phép sử dụng các kiểu mà không cần bất kỳ CSS hoặc JavaScript bổ sung nào. Trong trường hợp này, bạn có thể sử dụng bit này để tải bản đồ:

<body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 

Tuy nhiên, với DOCTYPE trang được hiển thị như DOCTYPE nói như vậy. Đặt một kiểu như trên sẽ không hoạt động nếu không có bất kỳ CSS bổ sung nào vì nó sử dụng tỷ lệ phần trăm. Phần tử không có kích thước, vì vậy bạn sẽ không chiếm được 100%. Vì vậy, nếu bạn đang sử dụng XHTML 1.0 Strict, nghĩa là.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd"> 

Trang ám như nó nên nếu bạn sử dụng pixel thay vì tỷ lệ phần trăm:

<body onload="initialize()"> 
    <div id="map_canvas" style="width:500px; height:400px"></div> 
</body> 

Bạn có thể làm điều đó cũng trong CSS.

Vì vậy, lựa chọn của bạn đang ở đây:

  1. Rời khỏi DOCTYPE và sử dụng pixel thay vì tỷ lệ HOẶC xác định chiều rộng và chiều cao thông qua CSS.

  2. Xóa DOCTYPE và sử dụng tỷ lệ phần trăm. Điều này không được khuyến cáo vì tài liệu nên luôn nói rằng DTD nên được hiển thị bằng.

Bạn có thể tìm thêm thông tin về chế độ Quirks từ here. Ngoài ra còn có bảng hiển thị cách các trình duyệt khác nhau phản ứng với việc thiếu DTD.

+1

+1 cho 100% sử dụng css - .map {width: 500px; chiều cao: 500px; vị trí: cố định! trái: 0; z-index: 1; top: 0;} –

+0

Sử dụng điều này trước khi tạo đối tượng bản đồ 'document.getElementById (" google-map "). style.height = $ (window) .height() + 'px';' – kushpf

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Tôi đang sử dụng loại tài liệu này và dường như nó hoạt động tốt. Nó có thể chỉ là bootstrap của bạn. Bạn tải Google như thế nào? Bạn đang gặp phải lỗi gì? Hiển thị loại kết quả bạn đang nhận được?

0

Câu hỏi của bạn cho biết "nếu chúng tôi sử dụng 'Doctype'". Điều này có nghĩa là bạn đã không làm trước đây? Nếu trước đó bạn không làm vậy, về cơ bản, bạn đang thay đổi 'quy tắc' về cách trang web sẽ được đặt ra. Nếu không có một loại tài liệu thích hợp, bạn đang ở chế độ quirks.

0

Một giải pháp nhanh chóng có thể sử dụng nó như sau:

document.getElementById("google-map").style.height = $(window).height()+'px';

trước

var map = new google.maps.Map(document.getElementById("google-map"), myMapOptions);

Nó hoạt động khá tốt với loại tài liệu được. Đã thử và thử nghiệm! :)