Javascript jQuery Mobile和Google地图不可见
好吧,我对jQuery手机很在行,但我的脚都湿了 要点是一个两页的移动网站。第一页是一个简单的表单,用户可以在其中选择几个选项。提交表单后,它们会被重定向到第二页,其中包含“地图画布”。但由于某种原因,下一页是空白的。有时,当我按下后退按钮时,我可以看到地图,但时间很短。我被难住了 我正在使用jQuery 1.6.4和jQuery Mobile 1.0rc1 以下是我的一些代码: 第一页HTML:Javascript jQuery Mobile和Google地图不可见,javascript,jquery,google-maps-api-3,jquery-mobile,Javascript,Jquery,Google Maps Api 3,Jquery Mobile,好吧,我对jQuery手机很在行,但我的脚都湿了 要点是一个两页的移动网站。第一页是一个简单的表单,用户可以在其中选择几个选项。提交表单后,它们会被重定向到第二页,其中包含“地图画布”。但由于某种原因,下一页是空白的。有时,当我按下后退按钮时,我可以看到地图,但时间很短。我被难住了 我正在使用jQuery 1.6.4和jQuery Mobile 1.0rc1 以下是我的一些代码: 第一页HTML: <div data-role="page" id="one"> <div
<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>
<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>
$(".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);
}
});
不确定WayFinderMobile是什么,但您是否尝试过
这里也有很多很好的例子。看起来我的问题是双重的 问题之一是我必须为MapCanvas div指定宽度和高度
<div data-role="content" style="padding:0px;margin:0;">
<div id="map_canvas" style="width:100%;height:350px;"></div>
</div>
此外,我还必须将地图设置为在“pageshow”事件中为地图所在的页面创建