0

", zoomLevel: 10" の部分を削除すると、"Hello World" div が表示されます。再度追加すると、mapContainer div がページ全体を占有するため、"Hello World" div が表示されません。html/css/javascript をコーディングして、マップ要素が占めるページの量を制御する方法の例を教えてください。

<div>Hello World</div>
<div id="mapContainer"></div>
~
~
~
var map = new nokia.maps.map.Display(mapContainer, {
    center: [52.51, 13.4], zoomLevel: 10 

});
4

1 に答える 1

2

次のいずれかの組み合わせ:

  • 次のような絶対位置のパーセンテージwidth:100%; height:90%; left: 0; top: 1em; position: absolute;
  • 高さの固定ピクセルサイズなどwidth:600px; height:600px;

つまり、次のようなものです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />



<title>Map with a DIV</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script language="javascript"  src="http://api.maps.nokia.com/2.2.4/jsl.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<div> I'm a DIV</div>
<div id="mapcanvas"  style="width:100%; height:600px;" >&nbsp;</div><br/><br/>  


<script type="text/javascript">
// <![CDATA[    

/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you 
// register on http://api.developer.nokia.com/ 
//
            nokia.Settings.set( "appId", "YOUR APP ID GOES HERE"); 
            nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");

/////////////////////////////////////////////////////////////////////////////////////   


 map = new nokia.maps.map.Display(document.getElementById('mapcanvas'), {
     'components': [ 
        // Behavior collection
        new nokia.maps.map.component.Behavior(), 
        new nokia.maps.map.component.ZoomBar()
        ],
    'zoomLevel': 5, // Zoom level for the map
    'center': [41.0125,28.975833] // Center coordinates
});
// ]]>
</script>
</body>
</html>
于 2013-06-06T15:25:49.443 に答える