在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.