ne peut pas passer var entre les fonctions de JS Codepen avec géolocalisations API

Question

Je ne parviens pas à en passer une variable url entre les fonctions dans mon code JS sur CodePen:

var options = { 
    enableHighAccuracy: true, 
    timeout: 5000, 
    maximumAge: 0 
}; 

function success(pos) { 
    var crd = pos.coords; 
    var lat = crd.latitude; 
    var long = crd.longitude; 
    var JSONurl = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + long + "&key=MY_APIKEY"; 

    console.log(JSONurl); 
    console.log(`Latitude : ${crd.latitude}`); 
    console.log(`Longitude: ${crd.longitude}`); 
    return JSONurl; 
}; 

function error(err) { 
    console.warn(`ERROR(${err.code}): ${err.message}`); 
}; 

function getCity() { 

    $.getJSON(JSONurl, function(json) { 
    var arr = $.map(json, function(el) { return el; }) 

    // console.log(Object.keys(arr[3])); 
    console.log(arr[3]["address_components"][1]["long_name"]); 

    } 
)}; 


var JSONurl = navigator.geolocation.getCurrentPosition(success, error, options);    
getCity(JSONurl); 

Idéalement je voudrais simplement appeler le getCity() fonction et pour que cette fonction appelle la fonction success(pos) et pour cela lancer et renvoyer la variable JSONurl à getCity().

Je n'ai aucune idée de pourquoi cela ne fonctionne pas, mais c'est un peu hack-ey de toute façon, donc des suggestions d'amélioration bienvenue.

Answer 1

Donc, il y a quelques problèmes:

1. navigator.geolocation.getCurrentPosition (succès, erreur, options) ne renvoie pas de valeur. Donc "return JSONurl" ne fonctionnera jamais.
2. key = MY_APIKEY devrait être votre clé googleapis (https://developers.google.com/maps/documentation/javascript/get-api-key, sinon déjà)
3. Vous devez utiliser une promesse parce que vous ne savez pas quand les googleapis retourneront l'info.
4. Vous devrez probablement utiliser une fonction de rappel en raison de la raison ci-dessus.
5. Vous devez prendre en compte si l'API rejette la demande.

Working verison jsfiddle - vous demandera clé google api

(function(window){ 

    // Declare internal variables 
    var _jsonURL = ""; 
    var _coords = ""; 
    var _latitude = ""; 
    var _longitude = ""; 

    // Enter your google api key when prompted 
    // https://developers.google.com/maps/documentation/javascript/get-api-key 
    var APIKEY = prompt("Please enter your google API key ", ""); ; 

    // Create promise 
    var _def = $.Deferred(); 

    window.GoogleAPI = {  
    options : { 
       enableHighAccuracy: true, 
       timeout: 5000, 
       maximumAge: 0 
    }, 
    getGeolocation : function(){ 
       // Set deferred action 
       _def = $.Deferred(navigator.geolocation.getCurrentPosition(success, error, GoogleAPI.options)); 

       // allows chaining 
       return this; 
    }, 
    getCity : function(callback){ 
     _def.done(function(){ 
      var city = ""; 

      $.getJSON(_jsonURL, function(json) { 
       //check if access to the API was denied 
       if (json.status == "REQUEST_DENIED"){ 
         console.error("API access denied.") 
         callback(null); 
         return; 
        }; 

       var arr = $.map(json, function(el) { return el; }) 

       city = arr[3]["address_components"][0]["long_name"]; 
       console.log(city); 

       callback(city); 
      }) 
      .fail(function(){ 
       console.warn("failed to getCity");    
       callback(null); 
      }); //end getJSON   
     }); //end _def 

     // allows chaining 
     return this; 
    } //end getCity 
}; //end window.GoogleAPI 



    function success(pos) { 
    _coords = pos.coords; 
    _latitude = _coords.latitude; 
    _longitude = _coords.longitude; 
    _jsonURL = "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + _latitude + "," + _longitude + "&key=" + APIKEY; 

    console.log(_jsonURL); 
    console.log(`Latitude : ${_coords.latitude}`); 
    console.log(`Longitude: ${_coords.longitude}`); 

    // Tell the promise the deferred action has been completed 
    _def.resolve(); 
    }; 

    function error(err) { 
    console.warn(`ERROR(${err.code}): ${err.message}`); 

    // Tell the promise the deferred action has failed 
    _def.reject(); 
    }; 

}(window)) 

GoogleAPI.getGeolocation() 
     .getCity(function(data){ 
      if(data){ 
       // do something with the data 
       alert(data); 
      } 
     }); 

Notes sur les promesses:

Promesses/fonction différée est un sujet lourd. Techniquement, $ .getJSON est une promesse qui est supposé succès (même si elles comprenaient .fail() pour le traitement des erreurs.)

var _def = $.Deferred(navigator.geolocation.getCurrentPosition(success, error, GoogleAPI.options)); <-- create a deferred action (a promise.) 

promesses sont des fonctions asynchrones. Normalement utilisé en cas de retard dans l'obtention de données.

_def.resolve(); <-- Says the promised action took place. 
_def.reject(); <-- Says the promised action failed. 
_def.done(function(){}) <-- runs if promised action was successful. 
_def.fail(function(){}) <-- runs id promised action failed.