Question

使用Google Charts GeoChart：https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart

是否可以放大比整个区域更近？也就是说，要获得地图的街景级别，并且仍然在上面链接的标记示例中显示标记？

感谢大家的帮助......

Answer 1

API不支持缩放，拖动或滚动。

Answer 2

作为一个技巧，我使用了带溢出的css zoom属性：隐藏在容器上。但它应该在google图表就绪事件中的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);

它对我有用，值得一试。

Answer 3

我遇到了同样的问题，GeoChart在这方面证明太有限了。

一种选择是使用Google地图和数据图层。例如，如果您需要具有颜色和大小的标记，您可以执行类似下页中的示例（请参阅“高级样式”）： https://developers.google.com/maps/documentation/javascript/examples/layer-data-quakes

您需要实现自己的插值来确定尺寸和颜色，但生成的地图/图表将优于单独的GeoChart。

Answer 4

看起来谷歌图表现在有一个名为“资源管理器”的实验性选项，适用于某些图表类型。看到： https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options

Answer 5

您可以尝试在单击标记时生成一个选择事件，然后在事件功能中可以通过如下更改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);
  }
});

谷歌图表（GeoChart） - 放大距离

5 个答案: