谷歌地圖的變更中心GeoChart

我正在與海洋科學家合作，他們從海岸帶取樣。我想改變海圖的中心位置。我想給出圖表中心的緯度/經度對，或者地圖區域的窗口/視圖的兩個緯度/經度對，或者指定多個狀態，如US-CT-NY。我希望有一個隱藏的API，如geochart.center = {lat: 89, long: -127}。谷歌地圖的變更中心GeoChart

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

來源

2012-10-18 Chloe

不幸的是，在谷歌geochart的當前版本沒有這樣的選擇。但是我可以想到一些可能或多或少工作的CSS黑客。喜歡的東西：

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

你必須弄清楚什麼樣的價值觀會爲你工作。

我過去使用過這種方法來改進API在某些區域中所做的'crop'。

這並不完美，但我認爲這是處理生成的地圖的作物和中心的唯一方法。

來源

2012-10-24 14:57:30 CMoreira

這幾乎可以奏效。不幸的是，當我轉移它時，部分被切斷。我試過像\t \t #chart_div { \t \t \t overflow：hidden; \t \t} \t \t #chart_div SVG { \t \t \t邊距：-200px; \t \t \t height：700px;/*這必須在瀏覽器中手動完成，或者JS */ \t \t} \t \t/*這些必須在瀏覽器中手動完成，直到我可以找出JS來做到這一點。 \t \t #chart_div div div svg defs clippath rect { \t \t \t height：700px; \t \t} \t \t #chart_div DIV DIV SVG克RECT { \t \t \t高度：700像素; \t \t} */ – Chloe

我需要的部分是它繪製的區域的邊緣，即狀態的邊緣。所以谷歌不會吸引那部分。 – Chloe

您可以使用完整的美國地圖，並創建一個非常大的地圖，並將其隱藏溢出並將其移至您想要的位置。那會有用嗎？ – CMoreira

我需要做類似的事情，再加上一些其他的調整。我想與大家分享我的hackings的情況下，它可以幫助別人......

首先在html：

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

#geo_outer是農作物/幀的實際geochart容器的容器。

該地理容器最初被稱爲「geo_inner」，但我決定我想要澳大利亞地圖&（ANZ）和澳大利亞地圖（澳大利亞），這取決於新西蘭是否來自數據庫。

爲了放大地圖並最大化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; 
}

這提供了更好的視覺效果，但我還是不希望看到北部和東北部所有那些無謂的島嶼。所以，解救路徑。現在我不是一個自然而然的人，所以我通過brower開發者工具突出顯示了內部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%);

您可以輕鬆地微調通過瀏覽器開發者工具多邊形，如果你使用的背景色：紅;在內心的第一個孩子（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);

這在我的手機和筆記本電腦上完美運行。我懷疑大多數設備的麻煩很小，因爲我的容器的像素尺寸和剪輯路徑都是百分比。當我放大瀏覽器時，一切都很好。

來源

2017-01-12 12:38:28 mickmackusa

谷歌地圖的變更中心GeoChart

回答

相關問題