1

我正在与海洋科学家合作，他们从海岸采集样本。我想将图表的中心更改为离海岸。我想为图表中心提供一个纬度/经度对，或为地图区域的窗口/视图提供两个纬度/经度对，或指定多个州，如 US-CT-NY。我希望有一个隐藏的 API，例如geochart.center = {lat: 89, long: -127}.

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Lat', 'Long', 'Popularity'],

    [41.083333333276, -73.39999999978, 20.4 ],
    [41.083333333276, -73.39999999978, 20.6 ],
    [41.099550000113, -73.415400000078, 19.0 ]
  ]);

  var options = {title:'Temperature', region:'US-CT', resolution:'metros', width: 556, height: 347};
  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, options);
}

http://code.google.com/apis/ajax/playground/?type=visualization#geo_chart

4

2 回答 2

2

不幸的是，当前版本的 google geochart 中没有这样的选项。但是我可以想到一些可能或多或少有用的 CSS hack。就像是：

#visualization {
width:550px;
overflow:hidden;
}
#visualization svg {
margin-left:-100px;
}

您必须弄清楚哪些价值观对您有用。

我过去曾使用这种方法来改进 API 在某些领域所做的“裁剪”。

它远非完美，但我认为这是对生成的地图的裁剪和中心进行一点操作的唯一方法。

于 2012-10-24T14:57:30.507 回答
1

我需要做一些类似的事情，再加上一些其他的调整。我想分享我的黑客行为，以防它帮助其他人......

首先是html：

<div id="geo_outer"><div id="<?php $inner ?>"></div></div>

#geo_outer 是裁剪/构图实际 geochart 容器的容器。

geochart 容器最初被称为“geo_inner”，但我决定选择澳大利亚和新西兰 (ANZ) 的地图和仅澳大利亚 (AUS) 的地图，具体取决于新西兰是否在数据库的结果集中。

为了放大地图并最大化geo_outer 的可用空间，我只是将内部div 的尺寸增加到大于#geo_outer 的尺寸并将其四处移动，直到所需区域在#geo_outer 中垂直和水平居中。*默认情况下，谷歌的图像试图填充其容器（内部）的尺寸——这意味着我不需要在 javascript 选项中摆弄 geochart 的宽度/高度。

在此处输入图像描述

#geo_outer {width:600px;height:490px;overflow:hidden;}
#geo_innerAUS {
    width:1100px;
    height:1048px;
    margin-top:-202px;
    margin-left:-235px;
}
#geo_innerANZ {
    width:850px;
    height:748px;
    margin-top:-112px;
    margin-left:-205px;
}

这提供了更好的视觉效果，但我仍然不想看到北部和东北部所有那些不必要的岛屿。所以，剪辑路径来救援。现在我不擅长排列点，所以我开始通过浏览器开发工具突出显示内部 div 的简单方法，屏幕截图，并将其放入http://bennettfeely.com/clippy/。我可以粗略地选择我需要什么样的多边形并拖动点直到一切正确。（一旦我将多边形点应用于我的页面，我确实必须做一些小的调整。）

这是添加到各个 div 的 css：

澳大利亚：-webkit-clip-path:polygon(58% 21%, 71% 41%, 75% 66%, 22% 66%, 22% 24%); clip-path:polygon(58% 21%, 71% 41%, 75% 66%, 22% 66%, 22% 24%); 澳新银行：-webkit-clip-path:polygon(60% 18%, 97% 56%, 74% 80%, 26% 80%, 26% 22%); clip-path:polygon(60% 18%, 97% 56%, 74% 80%, 26% 80%, 26% 22%);

如果您使用 background-color:red，您可以通过浏览器开发工具轻松微调多边形；在内部的第一个孩子（div）上。

在此处输入图像描述

最后，如果要包含图例，请确保不要从底部修剪太多。我真的不得不去挖掘 DOM 才能找到那个小流氓。这是我用来将它移到视图中的css：

#geo_innerAUS > div > div:nth-child(1) > div > svg > g > g:nth-child(3){transform:translate(350px,-350px);}
#geo_innerANZ > div > div:nth-child(1) > div > svg > g > g:nth-child(3){transform:translate(275px,-140px);}

ps 这是我在关闭正文之前放入的 javascript：

function drawGeoChart(){
    var data = google.visualization.arrayToDataTable([
        <?php echo $geo_jsdata; ?>
    ]);
    var options={
        region:'AU',
        displayMode:'regions',
        colorAxis:{colors: ['red','yellow','green']},
        resolution:'provinces'
    };
    var chart=new google.visualization.GeoChart($('#geo_outer>div:first-child')[0]);
        chart.draw(data,options);
}
google.charts.load("current",{packages:["geochart"]});
google.charts.setOnLoadCallback(drawGeoChart);

这在我的手机和笔记本电脑上完美运行。我怀疑大多数设备的问题都很小，因为我的容器的尺寸以像素为单位，并且剪辑路径都是百分比。当我放大和缩小浏览器时，一切都很好。

于 2017-01-12T12:38:28.860 回答