JQuery Mobile : Google지도를 업데이트 할 수 없습니다

장소 위치를 나타내는 마커가있는 Google지도를로드해야하는 위치 기반 앱이 있습니다 (JQuery Mobile을 사용하는 Phone Gap). 첫 번째로드 후지도가 새로 고침되지 않습니다. 주소를 기반으로 다른 위치를 표시하고 싶습니다.JQuery Mobile : Google지도를 업데이트 할 수 없습니다

나는 다이를 사용해도 라이브가 언 바인딩되지 않는 것 같습니다.

다음은 코드입니다.

function loadMap(indexClicked){ 
    var offerPosition = getLatAndLong(indexClicked); 
    var centerSettings = { 'center': offerPosition, 'zoom': 10 }; 
    initMap(centerSettings,indexClicked); 
    refreshMap(); 
} 

function initMap(centerSettings,indexClicked){ 
    $('#load-map').live('pageshow', function() { 
    $('#map-canvas').gmap({'center': centerSettings.center, 'zoom': centerSettings.zoom, 'disableDefaultUI':true, 'callback': function() { 
     var self = this; 
     self.addMarker({'position': this.get('map').getCenter() }).click(function() { 
      self.openInfoWindow({ 'content': showAdrressInMap(indexClicked) }, this); 
     }); 
    }}); 
    }); 
} 

function refreshMap(){ 
    $('#load-map').live('pageshow', function() { 
    $('#map-canvas').gmap('refresh'); 
    }); 
}

loadMap 함수는 클릭 할 때마다 호출됩니다.

PS : 첫 번째로드 후지도가 캐시 된 것처럼 보일 때마다 동일한 주소가 반환됩니다. 마커를 클릭하면 도구 설명의 주소가 새로 고쳐 지지만 위치는 동일하게 보입니다. jquery.ui.map.js, jquery.ui.map.services.js, jquery.ui.map.extensions.js 및 modernizr.min.js와 함께 jquery mobile 1.0 with phone gap 1.3.0을 사용하고 있습니다.

출처

2012-01-17 user1153900

같은 문제가 있습니다. '마커를 클릭하면 툴팁의 주소가 새로 고쳐 지지만 위치는 동일하게 보입니다.' 답변을 제공해주세요 ... –

마커를 지우고 새 마커를 추가하고 jQuery-ui-map의 중심 위치를 동적으로 설정하려면 다음 방법을 사용할 수 있습니다.

//clear all markers 
$('#map_canvas').gmap('clear', 'markers'); 

// add a new marker 
var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]}); 

// on marker click show the description 
$marker.click(function() { 
    $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this); 
}); 

// update the map's center position    
$("#map_canvas").gmap("get", "map").panTo(new google.maps.LatLng(cityList[i][1], cityList[i][2]));

은 Google Maps documentation 따르면 panTo 방법은 소정의 위도 경도를 포함하는 데 필요한 최소량으로지도를 패닝. 가능한 한 많은 경계가 표시된다는 점을 제외하고는 맵에서 경계가 어디인지 보장하지 않습니다. 경계가지도에있는 경우지도 유형과 탐색 (이동, 확대/축소 및 스트리트 뷰) 컨트롤로 경계가 지정된 영역 내부에 경계가 배치됩니다. 범위가지도보다 큰 경우 경계의 북서쪽 구석을 포함하도록지도가 이동됩니다. 지도의 위치 변화가지도의 너비와 높이보다 작 으면 전환이 부드럽게 움직입니다.

아래에서 샘플을 찾을 수 있습니다. 당신이 시카고 버튼을 누르면 마커가 추가되고지도의 중심 위치는 시카고

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>jQuery mobile with Google maps - Google maps jQuery plugin</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.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" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script> 
     <script type="text/javascript"> 

      var mobileDemo = { 'center': '41,-87', 'zoom': 7 }, 
       cityList = [ 
        ['Chicago', 41.850033,-87.6500523, 1], 
        ['Kentucki', 37.735377,-86.572266, 2] 
       ]; 

      function initialize() 
      { 
       $('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false }); 
      } 

      function addMarker(i) 
      { 
       //clear all markers 
       $('#map_canvas').gmap('clear', 'markers'); 

       // add a new marker 
       var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]}); 

       // on marker click show the description 
       $marker.click(function() { 
        $('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this); 
       }); 

       // set the map's center position 
       $("#map_canvas").gmap("get", "map").panTo(new google.maps.LatLng(cityList[i][1], cityList[i][2])); 
      } 

      $(document).on("pageinit", "#basic-map", function() { 
       initialize(); 
      }); 

      $(document).on('click', '.add-marker', function(e) { 
       e.preventDefault(); 
       addMarker(this.id); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="basic-map" data-role="page"> 
      <div data-role="header"> 
       <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</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> 
       <a href="#" id="0" class="add-marker" data-role="button" data-theme="b">Chicago</a> 
       <a href="#" id="1" class="add-marker" data-role="button" data-theme="b">Kentucki</a> 
      </div> 
     </div>  
    </body> 
</html>

난이 도움이되기를 바랍니다에 업데이트됩니다.

출처

2012-11-01 21:46:59

$ ('# map_canvas') .gmap ('destroy')을 사용하고 새로운 마커 위치로 다시 만들면 효과가있었습니다. 오래된 마커를 지우고 설정하는 것이 작동하지 않았습니다 .... –

JQuery Mobile : Google지도를 업데이트 할 수 없습니다

답변

관련 문제