Problème variable Jquery dans l'application jQuery mobile & google maps

Question

Avoir un problème de javascript et je me demandais si vous pouviez m'aider du tout s'il vous plaît. Le problème que j'ai est avec les variables ne sont pas ramassés, pensant que c'est peut-être un problème de portée, mais ne peut pas le comprendre. J'essaie de configurer une application basée sur google maps en utilisant jquery mobile et j'utilise les tutoriels http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt4part1 mais je les adapte à mes besoins.

Le plan d'ensemble est d'avoir une liste de liens qui, lorsque vous cliquez sur eux, ouvrir différents emplacements sur une carte et un outil de recherche de sentiers de votre emplacement actuel à la nouvelle destination. J'ai donc une fonction configurée pour extraire des informations d'une identité de données hrefs.

<a href="#page-map" class="destinationlink" data-role=button data-identity="53.37677497506021, -6.274824142456055" data-icon="star">Location link</a> 

L'info son tirant est coordonnées lat/long. Ensuite, je divise l'information qui a été tirée et met l'information dans 2 variables (lat et long). Cette partie fonctionne bien - J'ai alerté toutes les informations qui arrivent pour latValue et longValue et les deux affichent bien sur le clic de chaque bouton.

$('.destinationlink').live('click', 
       function() { 

       mapID = $(this).data("identity"); 

       // var mapID = '53.33970117191209, -6.24922513961792'; 


       //using this to split the lat/long info into 2 variables 
       var LocArray = mapID.split(','); 
       latValue = LocArray[0]; 
       longValue = LocArray[1]; 
       //can alert out these 2 values fine from here 

       } 
       ); 

Le problème est dans la ligne sous:

var mapdata = { destination: new google.maps.LatLng(latValue, longValue) }; 

Les valeurs lat/long ne semblent pas venir à travers. Je suppose que c'est une sorte de problème de portée variable, mais je ne suis pas vraiment sûr que toute aide serait très appréciée!

Si je mets les détails hardcoded dans cette ligne comme:

var mapdata = { destination: new google.maps.LatLng(53.37677497506021, -6.274824142456055) }; 

La charge carte fonctionne très bien.

Si je mets

var latValue = 53.33970117191209; 
var longValue = -6.24922513961792; 

directement avant la ligne, il fonctionne aussi très bien. Donc, je sais que le reste de la configuration est correcte, c'est juste la variable qui ne vient pas aussi loin que je peux voir.

Mais il ne gère pas les variables de la fonction click. J'ai essayé de mettre le tout dans une fonction mais cela n'a pas fonctionné pour moi non plus.

Des idées?

Je vais mettre le code complet ci-dessous au cas où je laisserais quelque chose d'important. J'ai essayé de mettre en place un jsfiddle mais je ne travaillais pas pour moi, désolé!

Merci d'avance pour toute aide, très appréciée! Je suis encore en train de javascript, donc je suppose que si vous gardez cela à l'esprit avec de l'aide s'il vous plaît !! :)

  var mapID; 
    var latValue; 
    var longValue; 

    $('.destinationlink').live('click', 
         function() { 

         mapID = $(this).data("identity"); 

         // var mapID = '53.33970117191209, -6.24922513961792'; 


         //using this to split the lat/long info into 2 variables 
         var LocArray = mapID.split(','); 
         latValue = LocArray[0]; 
         longValue = LocArray[1]; 
         //can alert out these 2 values fine from here 

         } 
         ); 

    // var latValue = 53.33970117191209; 
    // var longValue = -6.24922513961792; 

    var mapdata = { destination: new google.maps.LatLng(latValue, longValue) }; 


    //var mapdata = { destination: new google.maps.LatLng(53.37677497506021, -6.274824142456055) }; 

    // Start page 
    $('#page-home').live("pagecreate", function() {           

     $('#map_square').gmap(
       { 'center' : mapdata.destination, 
        'zoom' : 12, 
        'mapTypeControl' : false, 
        'navigationControl' : false, 
        'streetViewControl' : false, 
        'callback' : function(map) { 
         $('#map_square').gmap('addMarker', 
          { 'position' : map.getCenter(), 
          'animation' : google.maps.Animation.DROP 
          }); 
       } 
      }); 
     $('#map_square').click(function() { 
      $.mobile.changePage('#page-map', 'slide'); 
     }); 
    }); 

    //Create the fullscreen map, request display of directions 
    var toggleval = true; // used for test case: static locations 
    $('.refresh').live("click", function() { 
     $('#map_canvas').gmap({ 
      'callback' : function(map) { 



        // START: Tracking location with device geolocation 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition ( 
       function(position) { 
        $.mobile.showPageLoadingMsg(); 
        $('#map_canvas').gmap('displayDirections', 
        { 'origin' : new google.maps.LatLng(position.coords.latitude, 
            position.coords.longitude), 
         'destination' : mapdata.destination, 'travelMode' : 
            google.maps.DirectionsTravelMode.DRIVING}, 
        { 'panel' : document.getElementById('dir_panel')}, 
         function (success, result) { 
          if (success) { 
           $.mobile.hidePageLoadingMsg(); 
           var center = result.routes[0].bounds.getCenter(); 
           $('#map_canvas').gmap('option', 'center', center); 
           $($('#map_canvas').gmap('getMap')).triggerEvent('resize'); 
           } else { 
           alert('Unable to get route'); 
           } 
          } 
        );   
       }, 
       function(){ 
        alert('Unable to get location'); 
        $.mobile.changePage('#page-home', 'slide'); 
       }); 
      }    
     // END: Tracking location with device geolocation 






       // START: Tracking location with test lat/long coordinates 
       // Toggle between two origins to test refresh, force new route to be calculated 
       /* var position = {}; 
       if (toggleval) { 
        toggleval = false; 
        position = { coords: { latitude: 57.6969943, longitude: 11.9865 } };//Gothenburg 
       } else { 
        toggleval = true; 
        position = { coords: { latitude: 58.5365967, longitude: 15.0373319 } };//Motala 
       } 
       $('#map_canvas').gmap('displayDirections', 
        { 'origin' : new google.maps.LatLng(position.coords.latitude, 
                 position.coords.longitude), 
         'destination' : mapdata.destination, 
         'travelMode' : google.maps.DirectionsTravelMode.DRIVING}, 
         { 'panel' : document.getElementById('dir_panel')}, 
         function (success, result) { 
          if (success) { 
           var center = result.routes[0].bounds.getCenter(); 
           $('#map_canvas').gmap('option', 'center', center); 
           $($('#map_canvas').gmap('getMap')).triggerEvent('resize'); 
          } else { 
           alert('Unable to get route'); 
          } 
         });*/ 
       // END: Tracking location with test lat/long coordinates 
      } 
     }); 
     return false; 
    }); 

    // Map page 
    $('#page-map').live("pagecreate", function() { 
     $('.refresh').trigger('click'); 
    }); 

    // Go to map page to see instruction detail (zoom) on map page 
    $('#dir_panel').live("click", function() { 
     $.mobile.changePage('#page-map', 'slide'); 
    }); 

    // Briefly show hint on using instruction tap/zoom 
    /* 
    $('#page-dir').live("pageshow", function() { 
     $("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>" 
       + "Tap any instruction" + "<br>" + "to see details on map" +"</h1></div>") 
     .css({ "display": "block", "opacity": 0.9, "top": $(window).scrollTop() + 100 }) 
     .appendTo($.mobile.pageContainer) 
     .delay(1400) 
     .fadeOut(700, function(){ 
      $(this).remove(); 
     }); 
    });*/ 

Et le code html ..

 <!DOCTYPE HTML> 
     <html> 
      <head> 
      <meta name="viewport" content="width=screen.width; user-scalable=no" /> 
      <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
      <title>jQuery Google Maps Plugin</title> 
      <link rel="stylesheet" href="jquery.mobile-1.0b1.css" /> 
      <link rel="stylesheet" href="mapapp.css" type="text/css"> 

      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>  
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
      <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
      <script type="text/javascript" src="jquery.mobile/jquery.ui.map.js"></script>  

      <script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.js"></script>  
      <script type="text/javascript" charset="utf-8" src="mapapp.js"></script> 

      </head> 
      <body> 
      <div data-role="page" data-theme="c" id="page-home"> 
      <div data-role="header" data-theme="d" data-nobackbtn="true"> 
      <h1>Find a pitch</h1> 
      </div> 

      <div data-role="content" id="contenthome"> 

       <div class="ui-grid-a"> 
       <!-- 
       This line brings in the mini map - might be useful later on for a team page 
       <div class="ui-block-a"><div id="map_square"></div></div> 
       --> 

       <div class="ui-block-b"><p><strong>Tap on the map to see route and driving directions to this location.</strong></p></div> 
       </div><!-- /grid-a --> 

       <div data-role="controlgroup" data-theme="a" data-type="horizontal"> 

        <a href="#page-map" class="destinationlink" data-role=button data-identity="53.37677497506021, -6.274824142456055" data-icon="star">Location link</a> 

       <a href="#page-map" class="destinationlink" data-role=button data-identity="53.39251677780504, -6.285123825073242" data-icon="star">Location 2</a> 



       </div> 
      </div><!-- /content --> 

      <div data-role="footer" data-position="fixed"> 
       <h5>Footloose</h5> 
      </div><!-- /footer --> 
      </div><!-- /page-home --> 

      <div data-role="page" data-theme="c" data-fullscreen="true" id="page-map"> 

      <div data-role="content" class="map-content"> 
       <div id="map_canvas"></div> 
      </div><!-- /content --> 

      <div data-role="footer" data-theme="d" data-position="fixed"> 
      <div data-role="navbar"> 
      <ul> 
       <li><a href="#page-home">Home</a></li> 
       <li><a href="#page-map" class="refresh">Refresh</a></li> 
       <li><a href="#page-dir">Directions</a></li> 
      </ul> 
      </div><!-- /navbar --> 
      </div><!-- /footer --> 
      </div><!-- /page-map --> 

      <div data-role="page" data-theme="c" data-fullscreen="true" id="page-dir"> 

      <div data-role="content"> 
       <div id="dir_panel"></div> 
      </div><!-- /content --> 

      <div data-role="footer" data-theme="d" data-position="fixed"> 
      <div data-role="navbar"> 
       <ul> 
       <li><a href="#page-home">Home</a></li> 
       <li><a href="#page-map">Map</a></li> 
       </ul> 
      </div><!-- /navbar --> 
      </div><!-- /footer --> 
      </div><!-- /page-dir --> 

      </body> 
     </html> 

EDIT

Ok donc j'ai pris les conseils ci-dessous et de mettre le mapdata var et $ ('# map_square'). gmap (.. à l'intérieur de la fonction de clic mais ça ne fonctionne pas pour moi.L'emplacement ne charge toujours pas.J'ai mis juste la mapdata var là-dedans au début mais qui semblait la casser et la page ne s'est pas chargée du tout. Quelqu'un at-il des suggestions s'il vous plaît?

Merci pour votre temps!

C'est ce que j'ai maintenant (syntaxe Incase est mauvaise ou quoi que ce soit)

  $('.destinationlink').live('click', 
          function() { 

          mapID = $(this).data("identity"); 

          // var mapID = '53.33970117191209, -6.24922513961792'; 


          //using this to split the lat/long info into 2 variables 
          var LocArray = mapID.split(','); 
          latValue = LocArray[0]; 
          longValue = LocArray[1]; 
          //can alert out these 2 values fine from here 

          var mapdata = { destination: new google.maps.LatLng(latValue, longValue) }; 

          // Start page 
          $('#page-home').live("pagecreate", function() {           

           $('#map_square').gmap(
             { 'center' : mapdata.destination, 
              'zoom' : 12, 
              'mapTypeControl' : false, 
              'navigationControl' : false, 
              'streetViewControl' : false, 
              'callback' : function(map) { 
               $('#map_square').gmap('addMarker', 
                { 'position' : map.getCenter(), 
                'animation' : google.maps.Animation.DROP 
                }); 
             } 
            }); 
           $('#map_square').click(function() { 
            $.mobile.changePage('#page-map', 'slide'); 
           }); 
          }); 

          } 
          ); 

     // var latValue = 53.33970117191209; 
     // var longValue = -6.24922513961792; 




     //var mapdata = { destination: new google.maps.LatLng(53.37677497506021, -6.274824142456055) }; 



     //Create the fullscreen map, request display of directions 
     var toggleval = true; // used for test case: static locations 
     $('.refresh').live("click", function() { 
      $('#map_canvas').gmap({ 
       'callback' : function(map) { 



         // START: Tracking location with device geolocation 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition ( 
        function(position) { 
         $.mobile.showPageLoadingMsg(); 
         $('#map_canvas').gmap('displayDirections', 
         { 'origin' : new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude), 
          'destination' : mapdata.destination, 'travelMode' : 
             google.maps.DirectionsTravelMode.DRIVING}, 
         { 'panel' : document.getElementById('dir_panel')}, 
          function (success, result) { 
           if (success) { 
            $.mobile.hidePageLoadingMsg(); 
            var center = result.routes[0].bounds.getCenter(); 
            $('#map_canvas').gmap('option', 'center', center); 
            $($('#map_canvas').gmap('getMap')).triggerEvent('resize'); 
            } else { 
            alert('Unable to get route'); 
            } 
           } 
         );   
        }, 
        function(){ 
         alert('Unable to get location'); 
         $.mobile.changePage('#page-home', 'slide'); 
        }); 
       }    
      // END: Tracking location with device geolocation 






        // START: Tracking location with test lat/long coordinates 
        // Toggle between two origins to test refresh, force new route to be calculated 
        /* var position = {}; 
        if (toggleval) { 
         toggleval = false; 
         position = { coords: { latitude: 57.6969943, longitude: 11.9865 } };//Gothenburg 
        } else { 
         toggleval = true; 
         position = { coords: { latitude: 58.5365967, longitude: 15.0373319 } };//Motala 
        } 
        $('#map_canvas').gmap('displayDirections', 
         { 'origin' : new google.maps.LatLng(position.coords.latitude, 
                  position.coords.longitude), 
          'destination' : mapdata.destination, 
          'travelMode' : google.maps.DirectionsTravelMode.DRIVING}, 
          { 'panel' : document.getElementById('dir_panel')}, 
          function (success, result) { 
           if (success) { 
            var center = result.routes[0].bounds.getCenter(); 
            $('#map_canvas').gmap('option', 'center', center); 
            $($('#map_canvas').gmap('getMap')).triggerEvent('resize'); 
           } else { 
            alert('Unable to get route'); 
           } 
          });*/ 
        // END: Tracking location with test lat/long coordinates 
       } 
      }); 
      return false; 
     }); 

     // Map page 
     $('#page-map').live("pagecreate", function() { 
      $('.refresh').trigger('click'); 
     }); 

     // Go to map page to see instruction detail (zoom) on map page 
     $('#dir_panel').live("click", function() { 
      $.mobile.changePage('#page-map', 'slide'); 
     }); 

     // Briefly show hint on using instruction tap/zoom 
     /* 
     $('#page-dir').live("pageshow", function() { 
      $("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>" 
        + "Tap any instruction" + "<br>" + "to see details on map" +"</h1></div>") 
      .css({ "display": "block", "opacity": 0.9, "top": $(window).scrollTop() + 100 }) 
      .appendTo($.mobile.pageContainer) 
      .delay(1400) 
      .fadeOut(700, function(){ 
       $(this).remove(); 
      }); 
     });*/ 

Answer 1

Lorsque votre mapData est évalué, lat et long ne sont pas affectés (ils sont affectés à click). Utilisez ce lieu (en supposant par le temps pagecreate se produit, cliquez a été tiré:

$('#map_square').gmap(
     { 'center' : { destination: new google.maps.LatLng(latValue, longValue) }, 
       ... 

Answer 2

Vous devez mettre le var mapdata dans la fonction click Le script n'attend pas le clic pour régler cette variable mapdata, et à cet effet. latValue et longValue sont

Answer 3

Chaque fois que quelqu'un clique sur un lien, il ira à la page-carte, chaque fois que la page-map le crée à partir des données de l'élément. Le lien ne créera pas de carte mais mettra à jour la carte avec une nouvelle valeur de latence

var mapdata = { destination: new google.maps.LatLng('INITIAL_LAT', 'INITIAL_LNG') }; 
$('.destinationlink').live('click', function() { 
    // get the el data 
    mapdata.destination = new google.maps.LatLng(LocArray[0], LocArray[1]); 
}); 

$('#page-map').live("pagecreate", function() { 
    // setup the gmap with mapdata.destination as center 
}); 

$('#page-map').live("pageshow", function() { 
    // update the gmap center 
    $('#map_square').gmap('option', 'center', mapdata.destination); 
})