2011-10-19 62 views
0

好的,所以我是一个noobie,当谈到jQuery手机,但我的脚湿了。jQuery Mobile和谷歌地图不可见

该要点是一个两页的手机网站。第一页是一个简单的表单,用户可以选择几个选项。当表单被提交时,他们被重定向到第二页,其中包含“地图画布”。但由于某种原因,下一页只是空白。有时当我点击后退按钮时,我可以看到地图,但是很快。我很难过!

我正在使用jQuery 1.6.4和jQuery Mobile 1.0rc1。

下面是我的一些代码:

壹HTML:

<div data-role="page" id="one"> 
    <div data-role="content"> 
     <div data-role="fieldcontain"> 
      <form action="" id="mobile-findpath" method="post"> 
       <label for="mobile-start" class="select">Start:</label> 
       <select name="start" id="mobile-start"> 
        <option data-placeholder="true" value="">Current Position</option> 
        {% for node in nodes %} 
        <option value="{{ node.lat }},{{ node.lng }}">{{ node.label }}</option> 
        {% endfor %} 
       </select> 
       <label for="mobile-end" class="select">Dest:</label> 
       <select name="end" id="mobile-end"> 
        {% for node in nodes %} 
        <option value="{{ node.label }}">{{ node.label }}</option> 
        {% endfor %} 
       </select> 
       <a href="/m-map/" data-role="button" data-icon="gear">Show Route</a> 
       <!--<a href="#two" data-role="button" data-icon="gear">Show Route</a>--> 
      </form> 
     </div> 
    </div> 
</div> 

第二页(图)HTML:

<div data-role="page" data-title="Map" data-theme="b" class="page-map" style="width:100%; height:100%;"> 
    <div data-role="header"><h1>Map</h1></div> 
    <div data-role="content" style="width:100%; height:100%; padding:0;"> 
     <div id="map_canvas" style="width:100%; height:100%;"></div> 
    </div> 
</div> 

相关JS:

$(".page-map").live("pagecreate", function() { 
    wMobile = WayFinderMobile(); 
    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position){ 
      wMobile.initialize(position.coords.latitude, position.coords.longitude, true); 
     }); 
    } else { 
     wMobile.initialize(38.94617, -92.32866); 
    } 
}); 

回答

3

它看起来像我的问题是双重的,

一个是问题是,我不得不到指定地图画布DIV

<div data-role="content" style="padding:0px;margin:0;"> 
     <div id="map_canvas" style="width:100%;height:350px;"></div> 
</div> 

而且宽度和高度,我必须设置要在地图所在页面的“pageshow”事件中创建的地图。