jQuery Mobile和Google Maps App中的jQuery變量問題

Question

有一個JavaScript問題，想知道是否能對我有所幫助。 我遇到的問題是變量沒有被拾取，認為它可能是范圍問題，但無法弄清楚。

我正在嘗試使用jquery mobile設置基於Google Maps的應用程序，並且一直在使用http://www.mobiledevelopersolutions.com/home/start/twominutetutorials/tmt4part1教程，但是為了適應我的需要進行了調整。

總體規划是要有一個鏈接列表，單擊這些鏈接可以在地圖上打開不同的位置，並提供從當前位置到新目的地的路線查找器。

因此，我設置了一個函數來從hrefs數據標識中提取信息。

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

其引入的信息是經/緯度坐標。 然后，我將已提取的信息拆分，並將其放入2個變量（經緯度和經度）中。 該部分工作正常-我已提醒所有有關latValue和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 mapdata = { destination: new google.maps.LatLng(latValue, longValue) };

緯度/經度的值似乎不正確。 我猜想它存在某種可變范圍界定問題，但我不確定，因此任何幫助將不勝感激！

如果我將硬編碼的詳細信息放在此行中，例如：

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

地圖加載工作正常。

如果我放

var latValue = 53.33970117191209;
var longValue = -6.24922513961792;

直接在行前，它也可以正常工作。 因此，我知道其余的設置是正確的，據我所知，只是變量沒有通過。

但是它不會攜帶click函數中的變量。 試圖將整個事情作為一個功能，但這對我也不起作用。

有任何想法嗎？？

我將完整的代碼放在下面，以防遺漏任何重要的內容。 我嘗試設置jsfiddle，但沒有為我工作，對不起！

在此先感謝您的幫助，不勝感激！ 我對javascript還是很陌生，所以我想如果您有任何幫助的話請記住！！ :)

            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();
       });
    });*/

和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>

編輯

好的，所以我接受了下面的建議，並將mapdata var和$（'＃map_square'）。gmap（..）放在click函數中，但對我來說不起作用。該位置仍然無法加載。我把剛開始時只有mapdata var，但這似乎破壞了它，頁面根本沒有加載。有人有什么建議嗎？

謝謝你的時間！

這就是我現在所擁有的（如果語法錯誤或其他問題）

         $('.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

您需要將var mapdata放入click函數中。 腳本不等待單擊來設置該mapdata變量，因此latValue和longValue為null。

Answer 2

在評估mapData ，未分配lat和long （在click分配）。 請改用此方法（假設在pagecreate發生時，點擊已被觸發：

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

Answer 3

不應該是這樣嗎？ 每當有人單擊鏈接時，它將進入頁面地圖，只要該頁面地圖創建了該鏈接，便會從元素數據訪問latlng。 下一個鏈接不會創建地圖，但會使用新的latlng值更新地圖。

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);
})