在Google地图上完成搜索并使用它们进行JSON调用(https://api.forecast.io/forecast/APIKEY/LATITUDE,LONGITUDE-https://developer.forecast.io/docs/v2)后,我尝试访问lat和很长一段时间。我有以下代码:
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,
今天要获得新的lati,我必须将其更改为:
places[0].geometry.viewport.N.N
似乎几何对象的内容似乎经常更改...是否有编写代码的方法,以便无论更改如何,总能奏效?
在控制台中查看几何对象的图像
最佳答案
我认为更简单,请检查这项工作:
place = autocomplete.getPlace();
console.log(place.geometry.location.lat());
console.log(place.geometry.location.lng());
JSFiddle test