Tôi đã tải API Google Maps v3 và in Bản đồ Google trong div. Nhưng khi đặt chiều rộng & chiều cao đến 100% và tự động tôi không thể nhìn thấy Bản đồ.Đặt chiều rộng và chiều rộng DIV Vùng chứa của Google Maps 100%
Đây là đoạn mã HTML.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
Có cách nào để khắc phục sự cố này không?
Bạn phải đặt tất cả các container phụ huynh để có chiều rộng 100% nếu bạn muốn để trang trải toàn bộ trang với nó. Bạn phải đặt giá trị tuyệt đối ở chiều rộng và chiều cao cho #content div ở mức tối thiểu.
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
Nếu tôi chỉ muốn bản đồ xuất hiện ở một phần của trang web chứ không phải 100% thì sao? @Machiel – CodeGuru
@RainbowHat chỉ cần chỉ định kích thước trong CSS của bạn, thay đổi chiều rộng và chiều cao từ nội dung div # của bạn. – Machiel
Để rõ ràng, mọi phần tử gốc từ div nội dung (trong mã OP của nó là # map-canvas, chứ không phải #content) ** phải ** có một tập hợp chiều rộng/chiều cao cụ thể, cho dù đó là tương đối hay chính xác. Làm điều này, và câu trả lời này là chính xác. – Will
Nếu đó div là điều duy nhất trên trang của bạn, hãy đặt:
body, html {
height: 100%;
width: 100%;
}
http://stackoverflow.com/questions/13926371/google-map-inside-container#comment19198810_13926371 – CodeGuru
Gmap viết vị trí kiểu nội tuyến liên quan đến div. Ghi đè điều đó với:
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
Hy vọng điều đó sẽ hữu ích.
Đặt Vùng chứa bản đồ thành vị trí tương đối thực hiện thủ thuật. Đây là HTML.
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
Và đơn giản CSS.
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
Đã thử nghiệm trên tất cả các trình duyệt. Đây là Ảnh chụp màn hình.
Tôi gặp khó khăn khi tìm câu trả lời.
Bạn không thực sự cần phải làm gì với kích thước cơ thể. Tất cả những gì bạn cần để xóa kiểu nội tuyến khỏi mã bản đồ:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
xóa tất cả kiểu nội tuyến và thêm lớp hoặc ID rồi tạo kiểu theo cách bạn muốn.
Tôi vừa thêm kiểu nội tuyến.
<div id="map_canvas" style="width:750px;height:484px;"></div>
Và nó làm việc cho tôi.
Rất ít người nhận ra sức mạnh của định vị css. Để thiết lập bản đồ để chiếm chiều cao 100% của nó là thùng phụ huynh làm như sau:
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
Nếu bạn có bất kỳ phi yếu tố hoàn toàn vị trí bên trong #map_canvas_container họ sẽ thiết lập chiều cao của nó và bản đồ sẽ lấy không gian chính xác.
Kỹ thuật rất thú vị. Tôi đã là một nhà phát triển web trong một thời gian và đã không nhận thức được điều này. –
Quá xấu người xuống hạng câu hỏi này không bao giờ bận tâm để nói 'tại sao?' ... Làm việc tuyệt vời cho tôi – Chris
Điều này phù hợp với tôi.
Bạn có thể thiết lập chiều cao để -webkit-fill-sẵn
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
này làm việc cho tôi.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
Kiểu dáng của phần tử div # gmap_canvas chứa gì? – Machiel
'#content {background-color: #fff; đường viền: solid 1px # a6a196; border-radius: 4px; -moz-border-radius: 4px; height: auto; overflow: hidden;} ' – BBKing