Google Maps on Dojox mobile view

问题

The same question has been asked in this post, but the accepted answer doesn't help (me, at least).

I use dojox.mobile.View to display two views that look like this. Everything works fine, except the map container doesn't get displayed correctly. It is shown as a small box on the top page. Do I miss something on the layout file? Thank you!

<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>

Update:

<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

回答1:

the mobile view your using for the map view only has height:100% set where as the example has width + height 100%.

This can cause issues inside the div used for the map as its not picking up a width correctly. (i've seen a similar issue like this before, could be something else though)

EDIT:

Nothing pops out to me. Have you tried maybe using script to modify it ? something like:

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

回答2:

I had similar display problem with Dojo mobile + Google maps api version 3.

Simons solution did not work, but there was another way.

I don't create new topic, just give you this simple hint: Always check if Google maps loads AFTER DOM (for example using require(["dojo/domReady!"], function(){ ... })

来源：https://stackoverflow.com/questions/10598680/google-maps-on-dojox-mobile-view

标签

google-maps-api-3

dojo