Javascript 谷歌地图艺术的变化中心

我和海洋科学家一起工作，他们从海岸采集样本。我想把图表的中心改为远离海岸。我想为图表的中心提供一个纬度/经度对，或者为地图区域的窗口/视图提供两个纬度/经度对，或者指定多个州，如US-CT-NY。我希望有一个隐藏的API，比如

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

---

不幸的是，当前版本的谷歌地图中没有这样的选项。 然而，我可以想到一些CSS黑客可能或多或少地工作。 比如：

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

你必须弄清楚什么样的价值观适合你

我过去曾使用这种方法来改善API在某些领域的“收成”

---

这还远远不够完美，但我认为这是唯一能稍微操纵生成的地图的裁剪和中心的方法

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

首先是html：

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

这提供了更好的视觉效果，但我仍然不想看到北部和东北部那些不必要的岛屿。所以，把救援的路径剪掉。现在，我不是一个天生擅长排列点的人，所以我开始了简单的方法，通过brower开发者工具、屏幕截图突出显示内部div，并将其放入。我可以大致选择我需要的多边形类型，并拖动点，直到一切正常。（在将多边形点应用到页面后，我确实需要做一些小调整。）

以下是添加到各个div的css：

澳大利亚：

-webkit剪辑路径：多边形（58%21%，71%41%，75%66%，22%66%，22%24%）；
剪辑路径：多边形（58%21%，71%41%，75%66%，22%66%，22%24%）；

澳新银行：

-网络工具包剪辑路径：多边形（60%18%、97%56%、74%80%、26%80%、26%22%）；
剪辑路径：多边形（60%18%，97%56%，74%80%，26%80%，26%22%）

如果使用背景色：红色，则可以通过浏览器开发工具轻松微调多边形；在内尔的第一个孩子（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、 下面是我在关闭主体之前插入的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);

函数{
var data=google.visualization.arrayToDataTable([
]);
var期权={
地区：'AU'，
显示模式：'区域'，
颜色轴：{colors:['red'、'yellow'、'green']}，
决议：“各省”
};
var chart=new google.visualization.geographical（$（'geo#u outer>div:first child'）[0]）；
图表绘制（数据、选项）；
}
load（“当前”{packages:[“地球艺术”]}）；
google.charts.setOnLoadCallback（drawArt）；

这在我的手机和笔记本电脑上运行得非常好。我怀疑大多数设备的故障最小，因为我的容器的尺寸以像素为单位，剪辑路径都是百分比。当我放大和缩小浏览器时，一切都很好。
这几乎奏效。不幸的是，当我移动它时，部分被切断了。我尝试了类似于#chart_div{overflow:hidden；}#chart_div svg{margin top:-200px；height:700px；/*这必须在浏览器中手动完成，或者可能是JS/}/这些必须在浏览器中手动完成，直到我能找到JS来完成。#chart#u div div svg defs clippath rect{height:700px；}#chart#u div div div svg g rect{height:700px；}*/我需要的部分位于它绘制的区域的边缘，即状态的边缘。所以谷歌不画这一部分。你可以使用完整的美国地图，创建一个隐藏溢出的非常大的地图，并将其移动到你想要的位置。这样行吗？细节太小了。我想要CT和纽约之间的长岛之声。希望谷歌能更新API，让我们改变投影地图的中心点。那太好了。
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);