2017-10-21 3 views
0

Je ne parviens pas à en passer une variable url entre les fonctions dans mon code JS sur CodePen:ne peut pas passer var entre les fonctions de JS Codepen avec géolocalisations API

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.

+0

Je pense que la fonction getCity() doit être fonction getCity (JSONurl) –

+0

Ok, mais si je remplace la dernière ligne avec: var = JSONurl navigator.geolocation.getCurrentPosition (succès, erreur, options); console.log (JSONurl); getCity (JSONurl); cela ne se connecte toujours pas JSONurl à la console? – Davtho1983

Répondre

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. 
+0

Oui, je connais les clés API, je me demandais juste à propos de la sécurité et, même si google les distribue gratuitement je travaille dans Cyber ​​Security Je pensais qu'il devait y avoir une raison pour laquelle il y a une clé donc je ne voulais pas mettre la mienne code! – Davtho1983

+0

Cela a du sens. Où est-ce que vous pouvez faire fonctionner le reste? L'API de géolocalisation de Google semble très impitoyable. lol –

+0

Merci pour votre aide! Je n'arrive pas à comprendre certaines choses: 1) Je ne comprends pas pourquoi la fonction navigator.geolocation etc doit être différée? Est-ce que je ne comprends pas quelque chose à propos des rappels? Pourquoi est-ce que c'est 'renvoyer ceci' et pas 'retourner _def'? 2) Qu'est-ce que window.GoogleAPI? Est-ce imiter le comportement de classe avec js en faisant une fonction de fonctions? 3) Quel bit est la promesse et qu'est-ce qui se passe avec ça? – Davtho1983