Использование GeoCharts с приложением GWT для создания карты. Как рисовать фигуры?

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

легко рисовать и добавлять фигуры, как только ready' пожаров событий Картографических '

однако, не существует варианта для рисования не формирует похож на API Карт

то есть вы не сможете установить конкретные координаты lat/lng для размещения фигуры

вот рабочий фрагмент, который добавляет круг и треугольник к диаграмме ...

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); 
 
}

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