Question

我正在使用google maps api和dark skys api创建一个天气应用程序。最初，当应用程序从localhost启动时（我只是使用python简单服务器），浏览器获取用户位置并使用它的相应数据将其打印到屏幕上。

但是，当我输入其他位置并点击搜索时，天气数据会发生变化但位置保持不变。

非常感谢任何帮助。

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

您是否在调试器中逐步查看了故障的位置？如果对调试器不熟悉，也许您可以添加几行console.log来检查基本变量中的值，或者记录是否在您要求的用例中触发了map.setCenter（pos）约。

Javascript：位置名称没有变化，但数据是

1 个答案: