1

我正在使用 jQuery Mobile 创建一个 Web 应用程序。我的地图没有显示我想要的方式。我希望它填满标题下的屏幕。内容 div 的宽度和高度设置为 100%，但只有宽度跟随此参数，高度设置为 30px。

单击按钮时会显示此页面：

<div data-role="page" data-theme="b" id="Map">
    <div data-role="header">
        <a href="#Resultaten" data-role="button" data-icon="back" align="left" 
        data-iconshadow="false" data-direction="reverse" data-transition="slide"
        data-iconpos="notext">Terug</a>
        <h1>Kaart</h1>
        <a href="#Home" data-role="button" data-icon="home" 
        data-iconshadow="false" data-direction="reverse" onclick="empty()" 
        data-transition="slide" data-iconpos="notext">Terug</a>
    </div>
    <div data-role="content" id="map_canvas">
    <script>
        var map;
        function create_map(){
            var myOptions = {
            zoom: 15,
            center: new google.maps.LatLng(latitude, longitude),
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);    
        }                

    </script>
    </div>
</div>

map_canvas 的 css：

.map_canvas{
width: 100%; 
height: 100%; 
padding: 0;
}

结果

4

2 回答 2

1

.map_canvas不会对具有 ID 的元素产生任何影响map_canvas，请#map_canvas改用

于 2012-04-13T17:01:01.027 回答
0

CSS 需要知道 100% 的东西。目前，您尚未指定div包含您的地图的高度div。在桌面浏览器中，必须将高度一直指定到<html>.

div由于 API 需要该空间，因此您自己将任何内容放入地图中也不是一个好习惯。您可能会发现 API 在创建地图时会删除您的脚本。

于 2012-04-13T09:32:56.827 回答