Question

我在google地图上完成搜索后尝试访问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();

});

我遇到的问题是我的＆＃34; lati＆＃34;和＆＃34;长＆＃34;变量值。

以下情况似乎经常发生变化：

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

今天要获得新的lati，我不得不将其更改为：

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

从谷歌搜索的地方获取lat和long值

1 个答案: