Mobile 谷歌地图高度仅为30px

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

CSS需要100%地了解一些东西。当前您尚未为包含地图的

div

分区指定高度。在桌面浏览器中，有必要指定从继承权到

的所有高度

在map

div

中自己放置任何内容也是不好的做法，因为API需要该空间。你可能会发现API在创建地图时会删除你的脚本。

CSS需要100%了解一些东西。当前您尚未为包含地图的

div

分区指定高度。在桌面浏览器中，有必要指定从继承权到

的所有高度

---

在map

div

中自己放置任何内容也是不好的做法，因为API需要该空间。您可能会发现API在创建映射时会删除您的脚本。

.map\u canvas

不会对ID为

map\u canvas

的元素产生任何影响，请改用

\map\u canvas

。map\u canvas不会对ID为

map\u canvas

的元素产生任何影响，使用

#map_canvas

代替Ok我将脚本标记放在map

div

上方

html，body{height:100%；}

不起作用如何处理

divid=“Map”

？当我将

divid=“Map”

的宽度和高度设置为100%时，只有将

divid=“Map\u canvas”

也设置为100%，结果才会更好。我现在得到一个滚动条，可以向下滚动到与页眉相同的高度。我还得到了一个只显示10%的buggy地图，当我重新调整浏览器大小时，地图显示正常。这是因为你没有为标题指定高度。浏览器不是特别智能，尽管它们可以做出一些很好的猜测。一般来说，您需要准确地告诉他们需要做什么。但是jQuery mobile不负责吗？好的，我将脚本标记放在map

div

上方

html，body{height:100%；}

不起作用如何处理

divid=“Map”

？当我将

divid=“Map”

的宽度和高度设置为100%时，只有将

divid=“Map\u canvas”

也设置为100%，结果才会更好。我现在得到一个滚动条，可以向下滚动到与页眉相同的高度。我还得到了一个只显示10%的buggy地图，当我重新调整浏览器大小时，地图显示正常。这是因为你没有为标题指定高度。浏览器不是特别智能，尽管它们可以做出一些很好的猜测。一般来说，你需要准确地告诉他们需要做什么。但是jQuery mobile不解决这个问题吗？是的，有点小错误，谢谢你的清澈见底，但它并不能完全解决问题。是的，有点小错误，谢谢你的清澈见底，但它不能完全解决问题。

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