Question

使用jQuery在文档准备中调用时，以下函数会引发错误：

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 = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            url = 'https://api.forecast.io/forecast/',
            lati = places[0].geometry.location.B,
            longi = places[0].geometry.location.k,
            data,
            city = $('.city'),
            summary = $('.summary');

            console.log(places);

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


            console.log(data);

            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('string', 'hours');
            dataTable.addColumn('number', 'temperature');

            for(var i=0; i<data.daily.data.length; i++){

                  // dataTable.addColumn({type: 'string', role: 'annotation'});
                  dataTable.addRows([
                    ['0'+i,  data.daily.data[i].temperatureMax]
                  ]);
            }

          // Load the Visualization API and the piechart package.
          // google.load('visualization', '1.0', {'packages':['corechart'], callback: weatherAPP.generateGraph});
            var options = { tooltip: {isHtml: true}};
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(dataTable, options);

            city.html('');

            setTimeout( function(){ 
                weatherAPP.slideToCloseSearch();
            }, 500 );

            city.html('').html(places[0].formatted_address);
            summary.html('').html(data.daily.summary);

            if(data.currently.icon = 'clear-day'){
                $('.iconHolder').addClass('icon-sun');
            }
            else if(data.currently.icon = 'rain'){
                $('iconHolder').addClass('icon-rainy');
            }

            $('.temperature').html(data.currently.temperature+ ' <span>F</span>');

            weatherAPP.generateRainVisualEffect();

        });

        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);
    });

},

$(document).ready(function(){

     weatherAPP.displayTime();

    weatherAPP.generateMap();

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

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

    });

    weatherAPP.searchCity();

});

错误：无法读取未定义

的属性'DataTable'

Answer 1

错误本身是不言自明的。您无法获取未定义对象的属性。所以，它告诉你这一行：

var dataTable = new google.visualization.DataTable();

google或google.visualization未定义

没有看到你的其余代码，我只能猜测是什么导致了这个问题，但我的假设是没有加载Google Visualization API。另一种可能性是由于某种原因，google或google.visualization在全局命名空间中不可用。这将是我开始的两个地方。

我看到您的代码中有一个注释部分，看起来它的意图是加载Google Visualization API？ https://developers.google.com/loader/

// Load the Visualization API and the piechart package.
// google.load('visualization', '1.0', {'packages':['corechart'], callback: weatherAPP.generateGraph});

如果那是应该加载API的调用，那么取消注释并将其移到DataTable定义之上。

如果您仍然无法弄清楚导致问题的原因，请发布更多代码，以便我更详细地查看。

Answer 2

由于以下原因而发生此错误

未加载Google Visualization库
仅通过命名回调函数（例如，drawChart），就可以传递对该函数的引用。

因此，如果要将参数传递给drawChart函数，则需要将该调用包装在另一个函数声明中，如下所示：

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback( function() { drawChart(params) });

Answer 3

Angular 9上的Google图表

我有一个类似的错误，我的问题是我如何在setOnLoadCallback上调用drawChart方法。

google.charts.load('current', {'packages':['line']});  
//this was incorrect
//google.charts.setOnLoadCallback(this.drawChart());
google.charts.setOnLoadCallback(this.drawChart.bind(this));

无法读取未定义的属性'DataTable'

3 个答案: