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

Posted 2023-02-23

【中文标题】Javascript：位置名称没有改变，但数据是

【英文标题】：Javascript: Location name is not changing but data is

【发布时间】：2016-12-21 22:10:53

【问题描述】：

我正在使用 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>

【参考方案1】：

您是否在调试器中单步执行它以查看故障在哪里？如果对调试器不满意，也许您可​​以添加几行 console.log 来检查基本变量中的值，或者记录 map.setCenter(pos) 是否在您询问的用例中被触发关于。