Javascript 谷歌在地图上叠加图像
我目前正在使用谷歌的地球艺术绘制一幅小地图： 我使用Markers版本在地图上放置点，这些点稍后将与用户数据相关。我还想把一个小的图像覆盖旁边的标记。为此，我尝试使用谷歌图表的覆盖文档 然而，这幅画与我的马克笔完全不一致。是不是我错过了什么？现在，代码只在一页上，因为它只是测试概念Javascript 谷歌在地图上叠加图像,javascript,google-visualization,Javascript,Google Visualization,我目前正在使用谷歌的地球艺术绘制一幅小地图： 我使用Markers版本在地图上放置点，这些点稍后将与用户数据相关。我还想把一个小的图像覆盖旁边的标记。为此，我尝试使用谷歌图表的覆盖文档 然而，这幅画与我的马克笔完全不一致。是不是我错过了什么？现在，代码只在一页上，因为它只是测试概念 <!DOCTYPE html> <html> <head> <title>First Impression</title>
<!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>
第一印象
.带标记的Charter Overlay{
位置：相对位置；
宽度：700px；
}
.叠加文本{
宽度：200px；
高度：200px；
位置：绝对位置；
顶部：50px；/*图表区域顶部*/
左：200px；/*图表区域左*/
}
.重叠标记{
宽度：50px；
高度：50px；
位置：绝对位置；
顶部：53px；/*图表区域顶部*/
左：528px；/*图表区域左*/
}
load（'current'，{'packages'：['geochart']}）；
google.charts.setOnLoadCallback（drawMarkersMap）；
函数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'）；
//以“新日期（年、月、日）”的格式添加日期
//月份是零指数（所以一月是0，二月是1，等等）
data.addRows([
[“德国柏林”，新日期（2017年4月2日），1月1日]，
[“英国伦敦”，新日期（2016年3月25日），2月1日]，
[“俄罗斯莫斯科”，新日期（2016年4月10日），3月1日]，
[“加拿大渥太华”，新日期（2015年3月20日），4月1日]，
[“中国北京”，新日期（2012年4月22日），5月1日]，
[巴西圣保罗，新日期（2012年4月7日），6月1日]
]);
//将日期格式化为“MMM dd，yyyy”，例如“1865年4月20日”
var dateFormatter=new google.visualization.DateFormat（{pattern:'mmmdd，yyyy'}）；
dateFormatter.format（数据，1）；
//使用数据视图在工具提示中加入城市和日期
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,2,0{
键入：“编号”，
标签：“日期”，
计算：函数（dt，行）{
返回{
v:dt.getValue（第3行），
f:dt.getFormattedValue（第1行）
};
}
}]);
函数placeMarker（数据表）{
var cli=this.getChartLayoutInterface（）；
var chartArea=layoutInterface.getChartAreaBoundingBox（）；
//“僵尸”是元素#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.geograpart（document.querySelector（“#chart_div”）；
//var layoutInterface=chart.getChartLayoutInterface（）；
//google.visualization.events.addListener（图表'ready'，placeMarker.bind（图表，数据））；
图表。绘制（视图{
宽度：600，
显示模式：“标记”，
颜色轴：{
颜色：['#ff2352'，'#23ff52']
},
大小轴：{
maxSize:4//最大标记半径（像素）
}
});
};