Question

在this post中提出了同样的问题，但接受的答案没有帮助（至少我）。

我使用dojox.mobile.View显示两个看起来像this的视图。一切正常，但地图容器无法正确显示。它在首页显示为一个小方框。我是否遗漏了布局文件中的内容？谢谢！

<div id="view1" dojoType="dojox.mobile.View" selected="true">
    <h1 dojoType="dojox.mobile.Heading">View 1</h1>
    <ul dojoType="dojox.mobile.RoundRectList">
        <li dojoType="dojox.mobile.ListItem" icon="images/icon1.png" moveTo="view2" transition="slide">Go To View 2
        </li>
    </ul>
</div>

<div id="view2" dojoType="dojox.mobile.View" style="height:100%">
    <h1 dojoType="dojox.mobile.Heading" back="View 1" moveTo="view1">View 2</h1>
    <div dojoType="dojox.mobile.RoundRect" id="map_canvas" style="width:100% !important;height:100% !important;"></div>
</div>

更新

<body style="visibility: visible;">
<div id="view1" class="mblView" selected="true" style="visibility: visible; width: 100%; height: 100%; top: 0px; left: 0px; display: none;" dojotype="dojox.mobile.View" widgetid="view1">
<div id="view2" class="mblView" style="visibility: visible; width: 100%; height: 100%; top: 0px; position: relative; left: 0px;" dojotype="dojox.mobile.View" widgetid="view2">
    <h1 id="dojox_mobile_Heading_1" class="mblHeading mblHeadingCenterTitle" moveto="view1" back="View 1" dojotype="dojox.mobile.Heading" style="" widgetid="dojox_mobile_Heading_1">
    <div id="map_canvas" class="mblRoundRect" style="width: 100% ! important; height: 100% ! important; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" dojotype="dojox.mobile.RoundRect" widgetid="map_canvas">
        <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">

Firebug logs

Answer 1

我在Dojo mobile + Google maps api version 3中遇到了类似的显示问题。

Simons解决方案不起作用，但还有另一种方法。

我不会创建新主题，只需给出这个简单的提示：始终检查Google地图是否在DOM之后加载（例如使用require(["dojo/domReady!"], function(){ ... })

Answer 2

您在地图视图中使用的移动视图只有高度：100％设置，其中示例的宽度+高度为100％。

这可能会导致用于地图的div内部出现问题，因为它没有正确地拾取宽度。（我以前见过这样的类似问题，但可能是其他的东西）

编辑：

没有任何东西突然出现在我身上。您是否尝试过使用脚本来修改它？类似的东西：

var div = dojo.byId("map_canvas");
div.style.height = window.innerHeight+"px";
div.style.width = window.innerWidth+"px";

谷歌地图上的Dojox移动视图

2 个答案: