jQuery mobile 기존지도에 새 마커 추가

jQuery 모바일 google지도 예제를 사용하여 첫 번째 "기본지도 예제"에 중점을 둡니다.jQuery mobile 기존지도에 새 마커 추가

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html

나는 동적으로 basic_map에 마커를 추가 할 수 있도록하려면,하지만 몇 가지 문제가 있어요. JQuery 모바일과 JavaScript를 처음 사용했습니다.

다음은 jQuery 모바일 UI 웹 사이트에서 편집 한 기본지도 예제입니다. jQuery 모바일 demos 폴더에 저장하면 모든 것이 올바르게 렌더링되어야합니다. 지도 페이지의 하단에 버튼을 추가했으며 addMarkers 기능도 추가했습니다. 페이지를로드하면지도는 mobileDemo 좌표 (-41, 87)에 가운데에 표시됩니다.이 위치는 시카고에 가깝지만 그다지 없습니다. 버튼을 클릭하면 chicago 지점의 다른 마커로지도를 업데이트하려고하지만 화면이 공백으로 표시됩니다.

이것은 내가 실제로하고 싶은 모의 예일뿐입니다. 길고 복잡한 프로그램에서 쿼리와 일치하는 주소를 찾기 위해 데이터베이스에 쿼리를 수행 한 다음 해당 마커를 동적으로 맵에 배치하려고합니다. 시카고 포인트 (또는 다른 마커)를 플롯 할 수 있으려면이 소스 코드를 변경해야합니까?

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>jQuery mobile with Google maps - Google maps jQuery plugin</title> 
     <link type="text/css" rel="stylesheet" href="css/jquery-mobile-1.0/jquery.mobile.css" /> 
     <link type="text/css" rel="stylesheet" href="css/mobile.css" /> 
     <script type="text/javascript" src="js/modernizr-2.0.6/modernizr.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script> 
     <script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script> 
     <script type="text/javascript" src="js/jquery-mobile-1.0/jquery.mobile.min.js"></script> 
     <script type="text/javascript" src="js/jquery.ui-1.8.15/jquery.ui.autocomplete.min.js"></script> 
     <script type="text/javascript" src="js/demo.js"></script> 
     <script type="text/javascript" src="../ui/jquery.ui.map.js"></script> 
     <script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script> 
     <script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script> 
     <script type="text/javascript"> 

      var mobileDemo = { 'center': '41,-87', 'zoom': 7 }; 
      var chicago = new google.maps.LatLng(41.850033,-87.6500523); 
      var map 
      function addMarkers(){ 
       map = new google.maps.Map(document.getElementById('map_canvas')); 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: chicago 
       }); 
      } 

      $('#basic_map').live('pageinit', function() { 
       demo.add('basic_map', function() { 
        $('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() { 
         var self = this; 
         self.addMarker({'position': this.get('map').getCenter() }).click(function() { 
          self.openInfoWindow({ 'content': 'Hello World!' }, this); 
         }); 
        }}); 
       }).load('basic_map'); 
      }); 

      $('#basic_map').live('pageshow', function() { 
       demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map'); 
      }); 
     </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> 
      </div> 
      <div data-role="content"> 
       <a href="#" data-role="button" data-theme="b" onclick="addMarkers()">Add Some More Markers</a> 
      </div> 
     </div>  
    </body> 
</html>

출처

2012-08-22 erin

아래의 예를 확인하시기 바랍니다.

첫 번째지도로드에는 마커가 없습니다. 버튼을 클릭하면 페이지 또는 맵 새로 고침없이 마커가 동적으로 추가됩니다.

<!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 chicago = new google.maps.LatLng(41.850033,-87.6500523), 
       mobileDemo = { 'center': '41,-87', 'zoom': 7 }; 

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

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

       $(document).on('click', '.add-markers', function(e) { 
         e.preventDefault(); 
         $('#map_canvas').gmap('addMarker', { 'position': chicago }); 
       }); 
      </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="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a> 
       </div> 
      </div>  
     </body> 
    </html>

초기지도 :

enter image description here

버튼의 클릭 후지도 :

enter image description here

출처

2012-08-22 12:30:03

딱! 무리 감사! 나는 아주 간단한 후속 질문이있다. 맵에서 마커를 클릭 할 때 "hello world"라는 정보창을 표시하고 싶다면 어떻게해야합니까? 나는 문서를 살펴 봤고'$ ('# map_canvas') 구문을 가진 예제를 찾을 수 없기 때문에 약간 혼란 스럽다. gmap ('addMarker', { 'position': chicago}); '정보창으로. 다시 한번 감사드립니다. – erin

나는 후속 질문을 게시하여 답변에 대한 평판을 얻을 수 있습니다. http://stackoverflow.com/questions/12083564/syntax-for-adding-an-infowindow-to-a-marker-using-jquery -mobile-google-maps-api – erin

에린 감사합니다. 나는 질문에 대답했다 : –

jQuery mobile 기존지도에 새 마커 추가

답변

관련 문제