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



我正在使用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 Maps API 錯誤:Missing KeyMapError 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>

但是谷歌地图API错误一直出现在我的控制台中。

责声明:我创建了一个答案,不是因为它是答案而是因为它的信息太多,以至于它不会以任何方式适合评论(嗯;-((

免责声明2:我可能错过了一些东西,并没有真正尝试......希望你不要介意。

注意:三个月前,PrimeFaces扩展根据提交更新为较新的Google图表api版本,并发布了452,即将进行的更改,所以我专注于此!

在PrimeFaces-extensions gchart中.js我注意到

google.charts.load('current', {
packages : [ 'corechart', 'geochart', 'orgchart' ]
});
jQuery(document).ready(function() {
google.charts.setOnLoadCallback(function() {
that.draw();
});
});

在可视化中时:地理图表 | 图表 | 我看到的谷歌开发者

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-SNAPSHOT 并创建一个真正好的修复程序,您可以在其中创建真正好的修复

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

作为一种解决方法/黑客,我把这个脚本放在我的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>

相关内容

  • 没有找到相关文章

最新更新