Question

我正在使用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;
}

Result

Answer 1

.map_canvas对ID为map_canvas的元素不起作用，请改用<{1}}

Answer 2

CSS需要知道100％的东西。目前，您尚未指定包含地图div的{{1}}的高度。在桌面浏览器中，必须指定从层次到div的高度。

由于API需要该空间，因此在地图<html>中放置任何内容也不是好习惯。您可能会发现API在创建地图时会删除您的脚本。

Google地图高度仅为30px

2 个答案: