Google GeoChart 忽略 width/height

Question

直到昨天，Google geochart 停止收听我的声音！

宽度和高度被忽略，地图已恢复为全宽右上角的小版本 div。

       google.load('visualization', '1', {'packages': ['geomap']});


    function drawMap() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'City'); 
        data.addColumn('number', 'Visits'); 
        data.addColumn({type:'string', role:'tooltip', 'p': {'html': true}}); 
        data.addRows(#{GuideEditController.getCitiesData()});

  var options = {
        sizeAxis: { minValue: 0, maxValue: 100 },       
        displayMode: 'markers',
        colorAxis: {colors: ['#33ADFF', '#003D66']},
        width : '100%',
        height : '600px',
        enableRegionInteractivity: false,
        keepAspectRatio: true,
        legend : 'none',
        tooltip: {isHtml: true}
      };

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoChart(container);
      geomap.draw(data, options);
    };


      ....
     <div class="map" id='map_canvas'></div>
       <script type='text/javascript'>
       drawMap();
       </script>

这个 DIV 对我来说似乎是罪魁祸首..我不知道它来自哪里，但假设它是 Google 的东西。

之所以在 DIV 之后进行调用，是因为地图是在主页之后加载的选项卡上加载的。

昨天工作正常...

Answer 1

似乎 Google GeoChart 忽略了宽度和高度选项（尽管他们在 https://developers.google.com/chart/interactive/docs/gallery/geochart 中提到了它们）。

我遇到了类似的问题，这对我有用：

var options = {
    sizeAxis: { minValue: 0, maxValue: 100 },       
    displayMode: 'markers',
    colorAxis: {colors: ['#33ADFF', '#003D66']},
    enableRegionInteractivity: false,
    keepAspectRatio: true,
    legend : 'none',
    tooltip: {isHtml: true}
};

...

<div id="map_canvas" class="map" style="width: 100%; height: 600px;"></div>

Google GeoChart 忽略 width/height

Google GeoChart ignores width/height

javascript

google-maps

google-visualization