0
jQuery 모바일은 괜찮습니까? 그렇지만 나는 젖은 채로 있습니다.jQuery 모바일 및 Google지도가 표시되지 않습니다.
요지는 2 페이지 모바일 사이트입니다. 페이지 1은 사용자가 몇 가지 옵션을 선택하는 간단한 양식입니다. 양식이 제출되면 두 번째 페이지로 리디렉션됩니다. 두 번째 페이지는 '지도 캔버스'를 포함합니다. 그러나 어떤 이유로, 다음 페이지는 그냥 비어 있습니다. 때로는 뒤로 버튼을 누르면 맵을 볼 수 있지만 간단히 볼 수 있습니다. 나는 곤두박질 친다!
저는 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 :
여기 내 코드의 일부입니다 ,451,515,$(".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);
}
});