直到昨天谷歌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似乎是我的罪魁祸首..我不知道它来自哪里,但认为它是谷歌的东西。
在DIV之后进行调用的原因是因为地图加载在主页之后加载的选项卡上。
昨天工作正常......
答案 0 :(得分: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>