1
我目前正在使用Geochart由谷歌一個小地圖上疊加上Geochart圖像：由谷歌
https://developers.google.com/chart/interactive/docs/gallery/geochart
我使用標記的版本放置點在地圖上稍後將相對到用戶數據。我還想在標記旁放置一個小圖像疊加層。爲此，我嘗試使用谷歌圖表的覆蓋文檔。
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>
我在想也許試圖通過JavaScript獲取標記的位置，但每個標記都沒有ID，所以不知道該怎麼做。 – Mederic