jquery-ui-map init 이벤트가 호출되지 않았습니다.

JQUERY MOBILE에 대해 배우고 jquery-ui-map 플러그인을 사용하여지도를 추가하려고했습니다. 지도가 제대로 표시되지만 마커를 추가하는 데 문제가 있습니다.jquery-ui-map init 이벤트가 호출되지 않았습니다.

$ ('# map_canvas') .gmap()과 같은 함수 : 'init', 함수 (이벤트,지도) 또는 $ ('# map_canvas') gmap ({ '콜백': function() 호출되지 않습니다. 왜 이런 일이 무엇입니까?

**JS ** 
<script type="text/javascript"> 
     $(document).on("pageshow", '#map_page', function() { 
       $('#map_canvas').gmap('refresh'); 

     }); 

     $('#map_canvas').gmap().bind('init', function(event, map) { 
     $(map).click(function(event) { 
     $('#map_canvas').gmap('addMarker', { 
      'position': event.latLng, 
      'draggable': true, 
      'bounds': false 
     }, function(map, marker) { 
      //do whatever you need with the maker utilizing this variable 
      marker.__gm_id 
     }); 
    }); 
    }); 


     $('#map_canvas').gmap().bind('init', function(ev, map) { 
      console.log("GMAP Init"); 
      $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() { 
     $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this); 
    }); 
}); 


     $('#map_canvas').gmap({'callback': function() { 
     var self = this; // we can't use "this" inside the click function (that refers to the marker object in this example) 
     self.addMarker({'position': '57.7973333,12.0502107', 'bounds': true}).click(function() { 
      self.openInfoWindow({'content': 'Hello World!'}, this); 
      }); 
     }}); 


     $(document).on("pageinit", '#map_page', function(){ 
       $('#map_canvas').gmap({'center': '57.7973333,12.0502107'}); 
       console.log(" Init"); 

     }); 
</script>

HEAD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>New Web Project</title> 
     <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
     <script type="text/javascript" src="jquery.ui.map.js"></script> 
     <script type="text/javascript" src="jquery.ui.map.full.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="jquery.ui.map.services.js" type="text/javascript"></script> 

     <style type="text/css"> 
      #map_page, #map_canvas { width: 100%; height: 100%; padding: 0; } 
     </style>

출처

2013-08-05 Janusz Chudzynski

세 가지 방법으로 동일한지도를 초기화하고 있습니다. init에 바인딩하면 (기본적으로) 맵이 초기화 된 후에 실행되는 콜백을 정의하는 것과 동일한 작업을 수행합니다. 방법 중 하나를 선택하고 그것을 위해 가십시오. –

이것은 당신이. 참고해야 할 일은, 내가이 시험하지 않았다. 그래서 오타 실례.

을

**JS ** 
<script type="text/javascript"> 
     $(document).on("pageshow", '#map_page', function() { 
       $('#map_canvas').gmap('refresh'); 
     }); 


     $(document).on("pageinit", '#map_page', function(){ 
       $('#map_canvas').gmap({'center': '57.7973333,12.0502107'}). 
        bind('init', function() { 
         var self = this; // we can't use "this" inside the click function (that refers to the marker object in this example) 
         self.addMarker({'position': '57.7973333,12.0502107', 'bounds': true}) 
        }); 
     }); 
</script>

출처

2013-11-19 03:59:13

jquery-ui-map init 이벤트가 호출되지 않았습니다.

답변

관련 문제