Javascript: Standortname ändert sich nicht, aber Daten sind

Question

Ich benutze die Google Maps API und die dunkle SkyS API, um eine Wetter App zu erstellen. Anfangs, wenn die App von localhost gestartet wird (ich benutze nur einen einfachen Python-Server), ruft der Browser den Benutzerstandort ab und druckt ihn mit den entsprechenden Daten auf dem Bildschirm aus.

Wenn ich jedoch einen anderen Ort eintippe und auf Suche klicke, ändern sich die Wetterdaten, aber der Standort bleibt gleich.

Jede Hilfe würde sehr geschätzt werden.

JS

// Global Variables 
var geoLocation = {lat: 40.7127837, lng: -74.0059413}; 
var city = 'New York City'; 

$(document).ready(function(){ 
    $('#selected-city').keypress(function(e){ 
    if(e.which == 13){ 
     ajaxReqForLatLon(); 
     setTimeout(function(){ 
     initMap(geoLocation); 
     }, 500); 
    } 
    }); 
    // console.log(ajaxReqForLatLon); 
    $('#search-button').on('click', function(){ 
    ajaxReqForLatLon(); 
    }); 
    $('.btn.btn-success.btn-block').on('click', function(){ 
    $('#selected-city').val("").focus(); 
    }); 

    // Traffic 
    // Google Maps 
    function ajaxReqForLatLon(){ 
    var userRequestedLocation = selectedCity(); 
    var googleApiURL = 'https://maps.googleapis.com/maps/api/geocode/json?address='; 
    googleApiURL += userRequestedLocation; 
    googleApiURL += '&key=API_KEY'; 

    $.ajax({ 
     type: 'GET', 
     url: googleApiURL, 
     success: function(response){ 
     geoLocation = googleApiSuccessHandler(response); 
     weatherData(); 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
     console.log(errorThrown); 
     } 
    }); 
    } 

    // take response from ajax and take the geolocation 
    function googleApiSuccessHandler(response){ 
    var geoLocation = response.results[0].geometry.location; 
    return geoLocation; 
    } 

    function selectedCity(){ 
    city = $('#selected-city').val().trim(); 
    if(city.length === 0){ 
     $('#selected-city').addClass('animated shake'); 
     $('#selected-city').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
     $('#selected-city').removeClass('animated shake'); 
     }); 
     return; 
    }; 
    return city; 
    } 

    $('#selected-city').keypress(function(e){ 
    if(e.which == 13){ 
     ajaxReqForLatLon(); 
     setTimeout(function(){ 
     initMap(geoLocation); 
     }, 500); 
    } 
    }); 

    // Map on page load 
    setTimeout(function(){ 
    initMap(geoLocation); 
    }, 500); 

    var triggerOnce = true; 
    function initMap(geoLocation){ 
    var map = new google.maps.Map(document.getElementById('map'),{ 
     zoom: 12, 
     center: geoLocation, 
     scrollWheel: false 
    }); 

    var marker = new google.maps.Marker({map : map}); 

    if(triggerOnce){ 
     triggerOnce = false; 

     if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(function(position){ 
      geoLocation.lat = position.coords.latitude; 
      geoLocation.lng = position.coords.longitude; 
      var pos = { 
      lat : position.coords.latitude, 
      lng : position.coords.longitude 
      }; 
      reverseGeocode(); 
      weatherData(); 
      setTimeout(function(){ 
      $(".location").html(city); 
      }, 500); 
      marker.setPosition(pos); 
      map.setCenter(pos); 
     }, function(){ 
      handleLocationError(true, marker, map.getCenter()); 
     }); 
     } else { 
     handleLocationError(false, marker, map.getCenter()); 
     } 
    } 

    function handleLocationError(browserHasGeolocation, marker, pos){ 
     marker.setPosition(pos); 
     weatherData(); 
    } 
    var trafficLayer = new google.maps.TrafficLayer(); 
    trafficLayer.setMap(map); 
    } 

    // Reverse Geocode 
    function reverseGeocode(){ 
    var googleRevGeoApiURL = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='; 
    googleRevGeoApiURL += geoLocation.lat + ',' + geoLocation.lng; 
    googleRevGeoApiURL += '&key=AIzaSyCh5Q8_EFHuuQKVb4O3esOvemg-nFe6X0U'; 

    $.ajax({ 
     type: 'GET', 
     url: googleRevGeoApiURL, 
     success: function(response){ 
     city = response.results[0].address_components[2].long_name; 
     }, 
     error: function(jqXHR, textStatus, errorThrown){ 
     console.log(errorThrown); 
     } 
    }); 
    } 

    // Weather 
    var weatherData = function(){ 
    var geoLocLat = geoLocation.lat; 
    var geoLocLon = geoLocation.lng; 
    var forecastURL = 'https://api.forecast.io/forecast/80b1dfb6da9003b42f0dd846a0f08703/' + geoLocLat + ',' + geoLocLon; 
    var data; 
    $.getJSON(forecastURL + '?callback=?', function(data){ 
     $('#weather').html('Today: ' + data.currently.summary + '<br>' + 'Currently: ' + data.currently.temperature.toFixed(0) + '&deg; F' + '<br>' + 'High: ' + data.daily.data[1].temperatureMax.toFixed(0) + '&deg; F'); 
    }); 
    }; 
}); 

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
</head> 
<body> 
<div class="container"> 
    <br> 
    <input type="search" id="selected-city" class="form-control" placeholder="Enter City" autofocus> 
    <button id="search-button" class="btn btn-success btn-block" type="submit">Search</button> 
    <br> 
    <h2 class="location"></h2> 
    <h4 id="weather"></h4> 
    <div id="map"></div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh5Q8_EFHuuQKVb4O3esOvemg-nFe6X0U&signed_in=true&callback=initMap" async defer></script> 
<script type="text/javascript" src="meteocast.js"></script> 

</body> 
</html> 

Answer 1

Haben Sie trat in einem Debugger durch, um zu sehen, wo der Fehler ist? Wenn Sie mit einem Debugger nicht vertraut sind, könnten Sie vielleicht ein paar Zeilen console.log hinzufügen, um den Wert in den essentiellen Variablen zu überprüfen oder zu dokumentieren, ob das map.setCenter (pos) sogar in dem von Ihnen gewünschten Anwendungsfall ausgelöst wird Über.