gpt4 book ai didi

Javascript API - 使用 ZoomLevel 调用 nokia.maps.map.Display 会导致 map 容器 div 填充整个页面

转载 作者:行者123 更新时间:2023-12-02 18:39:38 26 4
gpt4 key购买 nike

如果我删除“,zoomLevel:10”部分,那么我可以看到“Hello World”div。如果我将其添加回来,那么mapContainer div将占据整个页面,这样我就看不到“Hello World”div。您能给我举一个示例,说明如何编写 html/css/javascript 来控制 map 元素占用的页面大小吗?

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

});

最佳答案

两者的某种组合:

  • 具有绝对位置的百分比,例如 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>

关于Javascript API - 使用 ZoomLevel 调用 nokia.maps.map.Display 会导致 map 容器 div 填充整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16965768/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com