지도보기가 PhoneGap과 함께로드되지 않습니다.

PhoneGap 및 jQueryMobile을 사용하여 iPhone 응용 프로그램을 개발하고 있습니다. 두 개의 html 페이지가 있는데 두 번째 html 페이지가 있으며 두 번째는 map.html입니다. 두 번째는 mapView.html입니다. index.html에서 mapView.html 열기지도보기가 PhoneGap과 함께로드되지 않습니다.

function loadMap() { 
     $.mobile.changePage("mapView.html", { transition: "pop"}); 
}

지도가로드되지 않습니다. 모든 브라우저에서 mapView.html을 열면 완벽하게 작동합니다. 심지어 직접 mapView.html을로드하여 변경하더라도
self.viewController.startPage = @"mapView.html";
의 appDelegate 클래스 맵에로드됩니다. 다른 .html 페이지에서 맵을 열면 맵이로드되지 않는 이유는 누구입니까? 내 PhoneGap 버전은 2.0.0입니다.
고마워요.

EDIT 1 mapView.html 코드

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Map Location</title> 
     <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /> 
     <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="jquery.mobile-1.1.1.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script> 
     <script type="text/javascript"> 

      var demoCenter = new google.maps.LatLng(41,-87); 

      var map; 
      function initialize() 
      { 
       map = new google.maps.Map(document.getElementById('map_canvas'), { 
              zoom: 7, 
              center: demoCenter, 
              mapTypeId: google.maps.MapTypeId.ROADMAP 
              }); 
      } 

      function addMarkers() 
      { 
       // perform your AJAX here. In this example the markers are loaded through the cityList array 
       $.ajax({ 
         type:'post', 
         url:'test.html', 
         data:'', 
         success:function(data) 
         { 

         // imagine that the data in this list 
         // will be retrieved from the AJAX response 
         // i used the cityList array just for testing 
         var cityList = [ 
             ['Chicago', 41.850033, -87.6500523, 1], 
             ['Illinois', 40.797177,-89.406738, 2] 
             ]; 

         var marker, i; 
         var infowindow = new google.maps.InfoWindow(); 
         for (i = 0; i < cityList.length; i++) 
         { 
         marker = new google.maps.Marker({ 
                 position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
                 map: map, 
                 title: cityList[i][0] 
                 }); 

         google.maps.event.addListener(marker, 'click', (function(marker, i) { 
                     return function() { 
                     infowindow.setContent(cityList[i][0]); 
                     infowindow.open(map, marker); 
                     } 
                     })(marker, i)); 
         } 
         } 
         }); 
      } 

      $(document).ready(function() 
           { 
           addMarkers(); 
           }); 
      </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="basic-map" data-role="page"> 
      <div data-role="header" data-theme="b"> 
       <h1>Map Location</h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <div data-role="content"> 
       <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
        <div id="map_canvas" style="height:350px;"></div> 
       </div> 
      </div> 
     </div>  
    </body> 
</html>

출처

2012-09-03 Ankur

지도를로드하는 mapView.html에 코드를 표시해야합니다. –

지도 페이지의 코드와 전환 코드를 게시 할 수 있다면 디버깅에 많은 도움이됩니다. –

$.mobile.changePage JQuery와 모바일 AJAX 기능을 사용한다. jQuery Mobile은 DOM의 첫 번째 data-role = "page"요소 안에있는 코드 만로드합니다. jQuery를 모바일에서 jQuery Mobile docs에 명시된 바와 같이

는, AJAX는 탐색으로 DOM에 각 페이지의 내용을로드하는 데 사용되며, DOM 준비 처리기 $(document).ready()는 첫 번째 페이지에 대한 실행합니다.

은 탐색이 아약스를 통해 수행되고 맵이 두 번째 페이지 내에서로드, 두 페이지를 포함하는 작업 예를 찾을 수 아래 :

은 또한 당신이 확인해를 사용하여 전환을 수행 할 수 있습니다 = " 외부 "또는 데이터 - 아약스 ="거짓 ". 이러한 속성을 사용하면 애니메이션 전환없이 전체 페이지가 새로 고침됩니다.

작업 예 :

방법 :

폴더
내 이름 맵 intro.html을 가진 파일을 생성 폴더
내 이름 maps.js을 가진 파일을 만듭니다 만들기 폴더
폴더 내에 map.html이라는 이름의 파일을 만듭니다.
생성 된

아래에서 발견 할 수있는 해당 코드 파일은 maps.js 내부에 아래 코드를 추가합니다 :

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Map Intro Page</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script> 
     <script src="./maps.js"></script> 
    </head> 
    <body> 
     <div id="map-intro-page" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">Map Example</a></h1> 
      </div> 
      <div data-role="content"> 
       <ul data-role="listview" id="my-list"> 
        <li><a href="#" id="map-anchor">Go to Map</a></li> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html>

이

function initialize() { 
    var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278), 
    myOptions = { 
     zoom:10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: mapCenter 
    }, 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

$(document).on('pageshow', '#map-page',function(event){ 
    initialize(); 
}); 

$(document).on('click', '#map-anchor', function(event){ 
    event.preventDefault(); 
    $.mobile.changePage("map.html", { transition: "flip" }); 
});

지도 - intro.html 내부에 아래 코드를 추가합니다

는 map.html 내부에 아래 코드를 추가합니다 :

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQuery mobile with Google maps geo directions example</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
    </head> 
    <body> 
     <!-- /page --> 
     <div data-role="page" id="map-page"> 
      <!-- /header --> 
      <div data-role="header"> 
       <h1>Map</h1> 
       <a data-rel="back">Back</a> 
      </div> 
      <!-- /content --> 
      <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
       <div id="map_canvas" style="height:300px;"></div> 
      </div> 
     </div> 
    </body> 
</html>

내가 홉 이것은 도움이됩니다.

출처

2012-09-03 17:31:03

그래, 도와 줘서 고마워, 네가 대답 해 줘서 고맙지 만,이 풀 페이지 새로 고침 때문에 다른 문제에 직면 해있다. mapView.html의 뒤로 버튼을 누르면 이전 페이지가 새로 고쳐지기 때문에 나는 원하지 않는다. 이것에 대한 어떤 생각? – Ankur

지도보기가 PhoneGap과 함께로드되지 않습니다.

답변

관련 문제