Question

目前我有一个GWT 2.8项目。在该项目中，我使用Geocharts绘制了美国的地图。我使用的确切包装如下。 com.googlecode.gwt.charts.client.geochart

我想知道是否有人有任何示例代码可以让我绘制类似于在此处完成的形状。 https://developers.google.com/maps/documentation/javascript/examples/polygon-simple 我所拥有的代码的基础知识如下：

GeoChart chart = new GeoChart();
DataTable dataTable = DataTable.create();
GeoChartOptions options = GeoChartOptions.create();

##add some longitude and latitude points to draw out ###

chart.draw(dataTable, options);

起点非常有用。

Answer 1

GeoChart from the google-visualization library使用SVG

一旦图表＆＃39; ready'事件触发，就很容易绘制和添加形状

但是，没有选择绘制类似于地图api

的形状

意思是，您将无法为形状的位置设置特定的纬度/经度坐标

这是一个工作片段，在图表中添加一个圆圈和三角形......

＆＃13;

google.charts.load('current', {
  callback: drawRegionsMap,
  packages: ['geochart']
});

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Popularity'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 600],
    ['RU', 700]
  ]);

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.GeoChart(chartDiv);

  google.visualization.events.addListener(chart, 'ready', function () {
    var svg = chartDiv.getElementsByTagName('svg')[0];

    var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    circle.setAttribute('cx', '380');
    circle.setAttribute('cy', '80');
    circle.setAttribute('r', '72');
    circle.setAttribute('stroke', '#000000');
    circle.setAttribute('stroke-width', '2');
    circle.setAttribute('fill', 'rgba(0,0,255,0.5)');
    svg.appendChild(circle);

    var poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    poly.setAttribute('points', '50,400 210,400 210,50');
    poly.setAttribute('stroke', '#000000');
    poly.setAttribute('stroke-width', '2');
    poly.setAttribute('fill', 'rgba(255,0,0,0.5)');
    svg.appendChild(poly);
  });
  chart.draw(data);
}

＆＃13;

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

＆＃13;

使用GeoCharts与GWT应用程序创建地图。如何绘制形状？

1 个答案: