Диаграммы Google (GeoChart) - приблизьте ближе

Использование Google Chart GeoChart: https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart

Можно ли приблизить приближение, а не только общий регион? То есть, чтобы перейти на уличный уровень карты и по-прежнему помещать маркеры, как показано в примере с маркером по ссылке выше?

Спасибо всем за помощь...

Ответы

Ответ 1

API не поддерживает масштабирование, перетаскивание или прокрутку.

Ответ 2

В качестве трюка я использовал свойство css zoom с переполнением: скрытый в контейнере. Но он должен быть выполнен после chart.draw(), в событии готовности диаграммы google.

И если вам нужно перерисовать (я перерисовываюсь при изменении размера окна, чтобы гарантировать отзывчивость), вы должны снова увеличить масштаб до 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);

Это сработало для меня, и стоит попробовать.

Ответ 3

У меня была та же проблема, и GeoChart оказался слишком ограниченным в этом отношении.

Один из вариантов - использовать Карты Google и Слои данных. Например, если вам нужны маркеры с цветами и размерами, вы можете сделать что-то вроде примера на следующей странице (см. "Расширенный стиль" ): https://developers.google.com/maps/documentation/javascript/examples/layer-data-quakes

Вам нужно будет реализовать свою собственную интерполяцию, чтобы определить размеры и цвета, но итоговая карта/диаграмма будет лучше, чем только GeoChart.