使用延遲獲取位置並顯示地圖

Question

我試圖瞭解顯示模塊模式和jQuery Deferreds與（我以爲是）簡單的例子。

我想要做的就是調用一個模塊來獲取用戶的位置，當調用成功時顯示在谷歌地圖上的位置，並且。

這兩個操作本身都使用了一堆函數和回調對我來說不成問題，但我試圖用更「餛飩」而不是「意大利麪條」來完成。

我發現，雖然延期工作完美，但我的模塊的公共屬性不包含我在操作過程中設置的值來獲取位置。

這是我的 'geoModule'

var geoModule = function() { 
    var lat; 
    var lng; 

    var init = function() { 
    return $.Deferred(function (def) { 
     getCurrentPositionDeferred({}) 
     .fail(function() { def.reject(); }) 
     .done(function (location) { 
      lat = location.coords.latitude; 
      lng = location.coords.longitude; 
      logger.log("Got location : " + lat + " : " + lng); 
      def.resolve(); 
     }); 
    }).promise(); 
    }; 

    var getCurrentPositionDeferred = function(options) { 
    var deferred = $.Deferred(); 

    navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject, options); 

    return deferred.promise(); 
    }; 

    return { lat: lat, lng: lng, init: init }; 
}(); 

，這是我的 'mapModule'

var mapModule = function (mapId) { 
    var mapElement = document.getElementById(mapId); 
    var map; 
    var initMap = function (lat, lng) { 
    logger.log("init map: " +lat + " : " + lng); 
    var myOptions = { 
     zoom: 14, 
     center: new google.maps.LatLng(lat, lng), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(mapElement, myOptions); 
    }; 


    return { initMap: initMap }; 
}('map'); 

當我把它們放在一起這樣的：

$.when(geoModule.init()) 
    .done(function() { 
     logger.log("location done " + geoModule.lat + " : " + geoModule.lng); 
     mapModule.initMap(geoModule.lat, geoModule.lng); 
    }); 

的geoModule.lat和geoModule.lng都是未定義的，甚至認爲將它們設置爲geoLocation的代碼已成功運行。

我在http://jsfiddle.net/faG4J/4/上創建了一個完整的例子，它顯示了日誌輸出。我可能在做一些非常愚蠢的事情，所以任何幫助都會得到最多的讚賞。

Answer 1

你設置的變量不是你的模塊的屬性 - 它們只是局部變量。您已將它們的值導出到模塊對象，但一次沒有設置它們。

但是，這不是你應該這樣做的方式。不要爲某些對象的某些屬性做出承諾，而是爲這些值作出承諾。

由於只有一個功能模塊顯得相當對我沒用，我已經在這裏他們省略：

function getPosition() { 
    var deferred = $.Deferred(); 
    navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject); 
    // pipe the output of the deferred through this logging and transformation function 
    return deferred.then(function (location) { 
     var lat = location.coords.latitude; 
     var lng = location.coords.longitude; 
     logger.log("Got location : " + lat + " : " + lng); 
     return {lat: lat, lng: lng}; 
    }); 
} 

然後使用類似getPosition.done(createMap)。