Question

我正在与海洋科学家合作，他们从海岸采集样本。我想将图表的中心改为离海岸。我想为图表的中心提供纬度/经度对，或者为地图区域的窗口/视图提供两个纬度/经度对，或者指定多个状态，如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

Answer 1

不幸的是，当前版本的google geochart中没有这样的选项。但是我可以想到一些可能或多或少有效的CSS黑客。类似的东西：

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

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

我过去曾使用过这种方法来改善API在某些领域的'裁剪'。

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

Answer 2

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

首先是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：

AUS：-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%); ANZ：-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，您可以通过浏览器开发人员工具轻松微调多边形：红色;在内心的第一个孩子（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);}

P.S。这是我在关闭正文之前输入的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);

这完全适用于我的手机和笔记本电脑。我怀疑大多数设备都遇到了最小的麻烦，因为我的容器有像素尺寸，剪辑路径都是百分比。当我将浏览器放大和缩小时，一切都很好。

更改Google Map GeoChart的中心

2 个答案: