Google Maps API v3 をロードし、Google マップを で印刷しましたdiv。しかし、幅と高さを 100% に設定し、自動にすると、マップが表示されません。
HTML コード スニペットを次に示します。
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
この問題を解決する方法はありますか?
192193 次
12 に答える
70
ページ全体をカバーする場合は、すべての親コンテナーを 100% 幅に設定する必要があります。少なくとも #content div の幅と高さに絶対値を設定する必要があります。
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
于 2012-04-18T13:14:46.200 に答える
2
これは私のための仕事です。
<!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>
于 2018-01-03T08:02:57.903 に答える
0
Gmap は、インライン スタイルの位置を div に相対的に書き込みます。それを次のように上書きします。
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
それが役に立てば幸い。
于 2013-02-18T11:01:11.093 に答える
-3
それdivがページ上の唯一のものである場合は、次のように設定します。
body, html {
height: 100%;
width: 100%;
}
于 2012-04-18T12:54:17.957 に答える
-3
答えを見つけるのにとても苦労しました。
ボディサイズに関しては特に何もする必要はありません。マップ コードからインライン スタイルを削除するために必要なことは次のとおりです。
<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>
すべてのインライン スタイルを削除し、クラスまたは ID を追加してから、好きなようにスタイルを設定します。
于 2013-10-01T13:24:19.163 に答える
-6
インライン スタイルを追加しました。
<div id="map_canvas" style="width:750px;height:484px;"></div>
そして、それは私のために働いた.
于 2013-11-11T09:45:37.920 に答える