獲取經緯度和長期價值谷歌搜索

Question

我試圖完成對谷歌地圖搜索後訪問lat和長，並利用它們做一個JSON調用（https://api.forecast.io/forecast/APIKEY/LATITUDE,LONGITUDE - https://developer.forecast.io/docs/v2）。我有以下代碼：

var animateLeft = 'animateDisplayInfo', 
    mainWrapper = $('.displayInfo'); 

var weatherAPP = { 

    generateMap: function(){ 

     var style = [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]; 

     var mapHolder = document.getElementById('map'); 
     var mapOptions = { 
      center: new google.maps.LatLng(51.5072, 0.1275), 
      zoom:6, 
      disableDefaultUI: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      styles: style 
     }; 

     this.map = new google.maps.Map(mapHolder, mapOptions); 

    }, 

    slideToSearch:function(){ 
     mainWrapper.addClass(animateLeft); 
    }, 

    slideToCloseSearch:function(){ 
     weatherAPP.generateRainVisualEffect(); 
     mainWrapper.removeClass(animateLeft); 
    }, 

    searchCity:function(){ 

     var map = this.map, 
      markers = [], 
      input = document.getElementById('pac-input'), 
      dataTable; 

     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

     var searchBox = new google.maps.places.SearchBox(input); 

     google.maps.event.addListener(searchBox, 'places_changed', function() { 

      var places = searchBox.getPlaces(), 
       apiKey = 'xxxxxxxxxxx', 
       url = 'https://api.forecast.io/forecast/', 
       lati = places[0].geometry.location.D, 
       longi = places[0].geometry.location.k, 
       data, 
       city = $('.city'), 
       summary = $('.summary'); 

       console.log(places[0].geometry.viewport.N.N); 

     //  $.getJSON(url + apiKey + "/" + lati + "," + longi + "?callback=?", function(data) { 


      if (places.length == 0) { 
       return; 
      } 
      for (var i = 0, marker; marker = markers[i]; i++) { 
       marker.setMap(null); 
      } 

      // For each place, get the icon, place name, and location. 
      var bounds = new google.maps.LatLngBounds(); 

      for (var i = 0, place; place = places[i]; i++) { 
       var image = { 
        url: 'pin.png' 
       }; 

       var marker = new google.maps.Marker({ 
        map: map, 
        icon: image, 
        title: place.name, 
        position: place.geometry.location 
       }); 

       markers.push(marker); 

       bounds.extend(place.geometry.location); 
      } 

      map.fitBounds(bounds); 

     }); // places_changed 

     // Bias the SearchBox results towards places that are within the bounds of the 
     // current map's viewport. 
     google.maps.event.addListener(map, 'bounds_changed', function() { 
      map.setZoom(6); 
      var bounds = map.getBounds(); 
      searchBox.setBounds(bounds); 
     }); 

    }, 

    generateRainVisualEffect: function(){ 
     $('.eq').delay(500).fadeIn(); 
     function fluctuate(bar) { 
      var height = Math.floor(Math.random() * 150) + 1; 
      if(height <= 15){ 
       $('.eq').css('margin-top', '-22px'); 
      } 
      //Animate the equalizer bar repeatedly 
      bar.animate({ 
       height: height 
      }, function() { 
       fluctuate($(this)); 
      }); 
     } 

     $(".bar").each(function(i) { 
      fluctuate($(this)); 
     }); 
    }, 

    displayTime:function(){ 

     // function(){date()}, 

     setInterval(function(){ 
      date()}, 
     1000); 

     function date() { 
      var now = new Date(), 
       now = now.getHours()+':'+now.getMinutes(); 
      $('#timeDisplay').html(now); 
     } 
    } 

}; 

google.load('visualization', '1.0', {'packages':['corechart']}); 

$(document).ready(function(){ 

    weatherAPP.displayTime(); 

    weatherAPP.generateMap(); 

    $('.boom').on('click', function(){ 

     if(mainWrapper.hasClass(animateLeft)){ 
      weatherAPP.slideToCloseSearch(); 
     }else{ 
      weatherAPP.slideToSearch(); 
     } 

    }); 

    weatherAPP.searchCity(); 

}); 

我的問題是我的「lati」和「long」變量值。

下似乎經常改變：

  lati = places[0].geometry.location.D, 
      longi = places[0].geometry.location.k, 

要獲得新的拉提今天我有將其更改爲：

places[0].geometry.viewport.N.N 

好像幾何對象的內容似乎經常改變。有沒有寫代碼的方式，以便無論改變總是會起作用的？

在控制檯

Answer 1

我覺得是比較簡單的幾何對象查看圖像，檢查這項工作：

place = autocomplete.getPlace(); 

console.log(place.geometry.location.lat()); 
console.log(place.geometry.location.lng()); 

JSFiddle test