使用谷歌图表 GeoChart:https ://google-developers.appspot.com/chart/interactive/docs/gallery/geochart
是否可以放大而不只是放大整个区域?也就是说,要达到地图的街景级别,并且仍然像上面链接上的标记示例中所示那样放置标记?
谢谢大家的帮助...
使用谷歌图表 GeoChart:https ://google-developers.appspot.com/chart/interactive/docs/gallery/geochart
是否可以放大而不只是放大整个区域?也就是说,要达到地图的街景级别,并且仍然像上面链接上的标记示例中所示那样放置标记?
谢谢大家的帮助...
API 不支持缩放、拖动或滚动。
作为一个技巧,我在容器上使用了带有溢出的 css 缩放属性:隐藏。但它应该在chart.draw() 之后在谷歌图表就绪事件上执行。
如果您需要重绘(我正在重绘窗口大小以保证响应性),您应该在再次绘制之前再次强制缩放到 1 或 100%。
HTML:
<div id="container" style="overflow:hidden; width:..px;">
<div id="chart_div"></div>
</div>
JS(jQuery):
$("#chart_div").css("zoom",1);
// [... google chart code generation ...]
google.visualization.events.addListener(chart, 'ready', function() { $("#chart_div").css("zoom",1.4); });
chart_draw(data, options);
它对我有用,值得一试。
我遇到了同样的问题,而 GeoChart 在这方面被证明太有限了。
一种选择是使用谷歌地图和数据层。例如,如果您需要带有颜色和大小的标记,您可以执行以下页面上的示例(请参阅“高级样式”): https ://developers.google.com/maps/documentation/javascript/examples/layer -数据地震
您需要实现自己的插值来确定大小和颜色,但生成的地图/图表将比单独的 GeoChart 更好。
看起来 Google Charts 现在有一个名为“explorer”的过期选项,适用于某些图表类型。请参阅: https ://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options
您可以尝试在标记单击时生成选择事件,并且在事件函数中,您可以通过更改 chartOptions 来更改图表的区域,如下所示:
google.visualization.events.addListener(chart, 'select', () => {
// console.log(this.continents);
if (continents.includes( continentData.getValue(chart.getSelection()[0].row, 2))) {
chartOptions.region = '053';
// 002 - Africa
// 150 - Europe
// 019 - Americas 021 - Northern America 005- South America 013- Central America 029 - Caribbean
// 142 - Asia
// 009 - Oceania
// 053 - Australia and New Zealand
chart.draw(continentData, chartOptions);
}
});