使用Google圖表庫制作未顯示的GeoChart

Question

大家。 我有個問題。 我正在制作一個網頁，並且要在其中包含一個GeoChart。 問題是，即使我直接從Google開發人員的網站復制粘貼並將代碼合並到現有的代碼中，地圖也不會顯示。 我不知道我在做什么錯。

這是JavaScript部分：-

<script>
google.charts.load('current', {'packages':['geochart']});
        google.charts.setOnLoadCallback(drawRegionsMap);

        function drawRegionsMap()
        {
            var data = google.visualization.arrayToDataTable([
            ['Country', 'Popularity'],
            ['Germany', 200],
            ['United States', 300],
            ['Brazil', 400],
            ['Canada', 500],
            ['France', 600],
            ['RU', 700]
            ]);

            var options = {};

            var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

            chart.draw(data, options);
        }
</script>

這是HTML部分：-

<div=id='regions_div' style="width: 600px; height: 500px;"></div>

Answer 1

似乎主要問題是div定義中的extra = ，在這里...
<div=id='regions_div' style="width: 600px; height: 500px;"></div>

因此，圖表無法找到在瀏覽器控制台中報告的容器。

改成...
<div id='regions_div' style="width: 600px; height: 500px;"></div>

另外，請確保同時加載兩個庫loader.js和jsapi

以下是有效的代碼段...

 google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; var chart = new google.visualization.GeoChart(document.getElementById('regions_div')); chart.draw(data, options); }, packages:['geochart'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://www.google.com/jsapi"></script> <div id='regions_div' style="width: 600px; height: 500px;"></div>