适用于Android的Dojo + Phonegap OpenStreetMaps

时间:2014-02-27 13:14:00

标签: android cordova dojo

我需要在Dojo下运行OpenStreetMap。我按照这个例子:http://dojotoolkit.org/reference-guide/1.9/dojox/geo/openlayers.html 问题是地图没有渲染,我不知道为什么。示例实现是这一个:http://demos.dojotoolkit.org/demos/mobileOpenLayers/demo.html

当我复制代码并在本地运行它时,它不起作用!

到目前为止我的代码(与给定示例中的代码相同):

<!DOCTYPE html>
     <html>
     <head profile="http://www.w3.org/2002/12/namespace">
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>Dojo OpenLayers Map Demo</title>
        <!-- hosted version of Open Layer libraries -->
        <script type="text/javascript" src="http://openlayers.org/api/2.10/OpenLayers.js"></script>
        <script type="text/javascript" src="../../dojo/dojo.js" data-dojo-config="parseOnLoad: 1,  async:1"></script>
        <script type="text/javascript" src="src.js" charset="utf-8"></script>
    </head>
    <body style='visibility:hidden;'>
        <div id="home" data-dojo-type="dojox.mobile.View" selected="true" >
            <h1 data-dojo-type="dojox.mobile.Heading" label="OpenLayers Map"></h1>
            <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Go To:</h2>
            <ul data-dojo-type="dojox.mobile.RoundRectList">
                <li id="paris" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
                    Paris
                </li>
                <li id="newyork" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
                    New York
                </li>
                <li id="lacolle" data-dojo-type="dojox.mobile.ListItem" moveTo="mapPage" transition="slide">
                    La Colle sur Loup
                </li>
            </ul>
        </div>
        <div id="mapPage" data-dojo-type="dojox.mobile.View">
            <h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="home" id="mapHeader"></h1>
            <div id="map" style="height:100%; width:100%; background-color: #b5d0d0;">
            </div>
        </div>
    </body> </html>

到目前为止我的研究:当我使用map-div的绝对值时,它可以工作:

<div id="map" style="height:100px; width:100px; background-color: #b5d0d0;">
                </div>

但我需要全屏播放。我该如何解决这个问题?

0 个答案:

没有答案