在Google上覆蓋Geochart上的圖像
[英]Overlaying an Image on Geochart by Google
問題描述
我目前正在使用Google的Geochart制作一張小地圖：
https://developers.google.com/chart/interactive/docs/gallery/geochart
我使用Markers版本在地圖上放置點，稍后將相對於用戶數據。 我還想在標記旁邊放置一個小圖像疊加層。 為此，我嘗試在Google圖表中使用Overlay doc。
https://developers.google.com/chart/interactive/docs/overlays
然而，圖片與我的標記完全沒有對齊。 我錯過了什么嗎？ 現在代碼只是在一個頁面上，因為它只是為了測試這個概念。
<!DOCTYPE html>
<html>
<head>
<title>First Impression</title>
<style>
.chartWithMarkerOverlay {
position: relative;
width: 700px;
}
.overlay-text {
width: 200px;
height: 200px;
position: absolute;
top: 50px; /* chartArea top */
left: 200px; /* chartArea left */
}
.overlay-marker {
width: 50px;
height: 50px;
position: absolute;
top: 53px; /* chartArea top */
left: 528px; /* chartArea left */
}
</style>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('date', 'Date');
data.addColumn('number', 'Marker Color');
data.addColumn('number', 'Marker Size');
// dates are added in the format "new Date(year, month, day)"
// month is zero-index (so January is 0, February is 1, etc
data.addRows([
['Berlin, Germany', new Date(2017, 4, 2), 1, 1],
['London, UK', new Date(2016, 3, 25), 2, 1],
['Moscow, Russia', new Date(2016, 4, 10), 3, 1],
['Ottawa, Canada', new Date(2015, 3, 20), 4, 1],
['Beijing, China', new Date(2012, 4, 22), 5, 1],
['Sao Paulo, Brazil', new Date(2012, 4, 7), 6, 1]
]);
// format the dates as "MMM dd, yyyy", eg. "Apr 20, 1865"
var dateFormatter = new google.visualization.DateFormat({pattern: 'MMM dd, yyyy'});
dateFormatter.format(data, 1);
// use a DataView to join city and date in the tooltips
var view = new google.visualization.DataView(data);
view.setColumns([0, 2, {
type: 'number',
label: 'Date',
calc: function (dt, row) {
return {
v: dt.getValue(row, 3),
f: dt.getFormattedValue(row, 1)
};
}
}]);
function placeMarker(dataTable) {
var cli = this.getChartLayoutInterface();
var chartArea = layoutInterface.getChartAreaBoundingBox();
// "Zombies" is element #5.
document.querySelector('.overlay-marker').style.top = Math.floor(layoutInterface.getYLocation(dataTable.getValue(5, 1))) - 50 + "px";
document.querySelector('.overlay-marker').style.left = Math.floor(layoutInterface.getXLocation(5)) - 10 + "px";
};
var chart = new google.visualization.GeoChart(document.querySelector('#chart_div'));
//var layoutInterface = chart.getChartLayoutInterface();
//google.visualization.events.addListener(chart, 'ready',placeMarker.bind(chart, data));
chart.draw(view, {
width: 600,
displayMode: 'markers',
colorAxis: {
colors: ['#ff2352', '#23ff52']
},
sizeAxis: {
maxSize: 4 // maximum marker radius in pixels
}
});
};
</script>
</head>
<body>
<div class="chartWithMarkerOverlay">
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div class="overlay-marker"> <img src="https://developers.google.com/chart/interactive/images/zombie_150.png" height="50"> </div>
</div>
</body>
</html>
1 個解決方案
解決方案1
0 2017-09-11 18:18:40
GeoCharts是他們自己的世界，有自己的規則。 Google Visualization API的其他元素僅適用於巧合。
PhantomJs保存谷歌圖表的API GeoChart的png圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.