Ajax call openweathermap.org
Ik ben bezig met een mobile web app te maken.
Nu heb via geolocation mijn positie bepaald en deze mooi weergegeven op een google maps kaartje, so far so good
Eerst test ik dus of geolocation toegestaan is als dit het geval is roep ik de functie succes aan, nu heb ik een uitbreiding gemaakt die de temperatuur zou moeten aangeven van deze locatie dus roep ik naast succes ook WeatherRequest aan.
Maar daar loopt het mis:
- in de function succes doe ik: var lat = position.coords.latitude; en var longi = position.coords.longitude; => dit werkt perfect, maar als ik exact het zelfde doe in mijn tweede functie krijg ik onderstaande error:
Uncaught TypeError: Cannot read property 'latitude' of undefined (index):55
online voorbeeld: http://ninetythree.be/ioutfit/v2/
Betrefdende code: js staat allemaal nog mee in de index file maar wordt later nog naar een externe file gebracht!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$("document").ready(function() {
//checken of geolocation is toegestaan, als deze is toegestaan wordt de functie success uitgevoerd!
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, WeatherRequest);
}
//locatie weergeven en integratie van google maps map met je positie!
function success(position) {
$(".test").append("geoloaction succesvol!");
var lat = position.coords.latitude;
var longi = position.coords.longitude;
$(".location").append("<li>" + lat + "</li><li>" + longi +"</li>");
console.log(lat);
console.log(longi);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
//temperature
function WeatherRequest(position){
console.log("succes");
console.log("init");
var lat = position.coords.latitude;
var longi = position.coords.longitude;
$.ajax({
//api.openweathermap.org/data/2.5/weather?lat=35&lon=139
url: "api.openweatermap.org/data/2.5/weather?lat=" + lat + "&lon=" + longi,
dataType: "jsonp",
success: callback
});
}
WeatherRequest(function(data) {
console.log('weer data ontvangen');
})
});
//checken of geolocation is toegestaan, als deze is toegestaan wordt de functie success uitgevoerd!
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, WeatherRequest);
}
//locatie weergeven en integratie van google maps map met je positie!
function success(position) {
$(".test").append("geoloaction succesvol!");
var lat = position.coords.latitude;
var longi = position.coords.longitude;
$(".location").append("<li>" + lat + "</li><li>" + longi +"</li>");
console.log(lat);
console.log(longi);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
//temperature
function WeatherRequest(position){
console.log("succes");
console.log("init");
var lat = position.coords.latitude;
var longi = position.coords.longitude;
$.ajax({
//api.openweathermap.org/data/2.5/weather?lat=35&lon=139
url: "api.openweatermap.org/data/2.5/weather?lat=" + lat + "&lon=" + longi,
dataType: "jsonp",
success: callback
});
}
WeatherRequest(function(data) {
console.log('weer data ontvangen');
})
});
Gewijzigd op 05/12/2013 13:50:09 door Joren vh
Je hebt dus dit:
navigator.geolocation.getCurrentPosition(success, error, options)
Met andere woorden; indien alles lukt, wordt de success callback getriggerd; en krijgt als parameter de position mee.
Indien er een error is, is de position niet gevonden. De parameter die je daar mee krijgt, is een error object.
Jouw function WeatherRequest zou er zo uit kunnen zien
function WeatherRequest(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
Het lijkt me niet dat die functie daarvoor bedoeld is.
Waarvoor heb je die wel bedoeld?
Wanneer - onder welke omstandigheden - verwacht je dat WeatherRequest moet worden uitgevoerd?
------
Wat je op lijn 48 doet, snap ik al helemaal niet. Waarom voer je daar WeatherRequest uit? En waarom steek je een functie in de parameter?
Gewijzigd op 05/12/2013 14:06:14 door Kris Peeters
WeatherRequest(position);
uitvoeren.
Dus bv. tussen lijn 32 en lijn 33
Gewijzigd op 05/12/2013 14:08:38 door Kris Peeters
edit
longitude en latitude error opgelost
enkel plakt hij nu nog een heel stuk achter mijn url dat er niet hoort te staan, van waar komt dit?
http://api.openweatermap.org/data/2.5/weather?lat=51.0260538&lon=4.4605912&callback=jQuery191041902255499735475_1386249118454&_=1386249118455
&callback.. is teveel?
Gewijzigd op 05/12/2013 14:13:21 door joren vh
http://ninetythree.be/ioutfit/v2/
Omwille van veiligheidsmaatregelen moeten de webbrowsers die functionaliteit uitschakelen.
Je zult het moeten doen via hun API.
Wat ben je eigenlijk van plan met die weerkaarten?
Vertel eens wat het eindresultaat zou moeten zijn
Eindresultaat: aan de hand van de locatie moet de temperatuur bepaald worden op dat moment. uiteindelijk applicatie zal een random foto geven uit de database na het schudden met de device aan de hand van het weer.
Iemand vroeg: Wat is een API
http://www.phphulp.nl/php/forum/topic/wat-is-een-api/93152/#667402
Ik toon dus een manier waarop die restrictie kan omzeild worden.
Als je hun <script> van de API laadt, geven zij een (of meerdere) variabele een waarde. Die variabele kan je dan gebruiken.
Zo werkt een API
----
Ik ben ondertussen wat aan het rondsnuffelen bij http://openweathermap.org/API . Zien wat de mogelijkheden zijn.
Gewijzigd op 05/12/2013 14:54:38 door Kris Peeters