如何在PrimeFaces扩展gChart中设置Google密钥

Question

我使用PrimeFaces扩展(6.1.0)来使用pe:gChart创建一些图表。

其中一个图表是一个地形图显示在橱窗中。到目前为止没有问题。

我需要渲染的另一个图表是一个标志地形图。这一点在PrimeFaces扩展展示中没有解释，但我希望这将是一项简单的工作。最后我得到了这个模型(我认为这是正确的)：

GChartModelBuilder builder = new GChartModelBuilder();
builder.setChartType(GChartType.GEO);
builder.addOption("displayMode", "markers");
builder.addOption("region", country);
builder.addColumns("City", "Total");
for (...) {
  builder.addRow(city, total);
}

当我运行我的项目时，我确实看到了这张图表的地图。该区域是正确的，但没有出现标记。不过也有标记数据生成。

我的浏览器控制台告诉我：

Google错误: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

我是否可以在不创建黑客的情况下设置这个API密钥？

更新

我创建了一个自定义呈现器：

public class MyGChartsRenderer extends GChartRenderer
{

  @Override
  protected void encodeMarkup(FacesContext context, GChart chart) throws IOException
  {
    ...

    this.startScript(writer, chart.getClientId());
    // Appended ?key=xxxxx to the URL (other lines are not modified)
    writer.writeAttribute("src", "https://www.google.com/jsapi?key=xxxxx", null);
    this.endScript(writer);
  }

}

并将其加载到faces-config.xml中

<render-kit>
  <renderer>
    <component-family>org.primefaces.extensions.component</component-family>
    <renderer-type>org.primefaces.extensions.component.GChartRenderer</renderer-type>
    <renderer-class>MyGChartsRenderer</renderer-class>
  </renderer>
</render-kit>

但是Google错误一直出现在我的控制台中。

Answer 1

免责声明:我创建了一个答案，不是因为它是的答案，而是因为它是如此之多的信息，以至于它无论如何都不适合于评论(嗯；-)

免责声明2:我可能错过了一些事情，但实际上并没有尝试.希望你不介意。

注意:三个月前，PrimeFaces扩展更新为更新的谷歌图表、api、根据提交的版本和第452期，即将进行更改，所以我集中讨论了这一点！

在PrimeFaces-扩展gchart.js中我注意到

google.charts.load('current', {
        packages : [ 'corechart', 'geochart', 'orgchart' ]
    });

    jQuery(document).ready(function() {
        google.charts.setOnLoadCallback(function() {
            that.draw();
        });
});

当我在可视化: GeoChart / Charts \ Google开发人员上看到

google.charts.load('current', {
    'packages':['geochart'],
    // Note: you will need to get a mapsApiKey for your project.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

与问题提交/修复/发布相关，在PrimeFaces扩展展示源代码主干时，我还注意到它们显式加载

<script src="https://www.gstatic.com/charts/loader.js"></script>

在xhtml中。

大量即将发生的更改，因此未来最有说服力的解决方案将是尝试6.2快照，并在其中创建一个很好的修复程序。

• 将mapsApiKey属性和getter/setter添加到GChart.java
• 将.attr("mapsApiKey"，chart.getMapsApiKey())添加到GChartRenderer.java
• 在正确的位置将this.mapsApiKey = cfg.mapsApiKey -and 'mapsApiKey': this.mapsApiKey添加到gchart.js

Answer 2

作为一种解决办法/黑客，我已经将这个脚本放在了我的XHTML中：

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxx&amp;v=3&amp;callback=google.loader.callbacks.maps&amp;sensor=false"></script>