在谷歌地图上的某个点显示来自后台csv的风数据

Displaying wind data from csv in back ground at point in Google map

本文关键字：后台 csv 数据 谷歌地图 显示      更新时间：2023-09-26

我有csv格式的风数据，比如纬度和经度、风速、方向、温度，我想在谷歌地图的后台显示这些数据，就像如果我点击地图上的某个给定点，它应该弹出风速、方向等数据，我可以给出图像的示例链接，请帮助我，我有所有的风数据，从美国国家航空航天局得到这些数据花了一年时间，但我无法完成这项任务。。

http://wpcore.wpe.s3.amazonaws.com/wp-content/uploads/2012/03/wind-navigator.png

您应该将收集的数据从CSV转换为JS对象(确切地说是json(。这样，您就可以将它直接用作代码的输入。

var WindCollection=[
    {name: 'Place 1', lat: 37.55,  lng:-90 , wind_speed:50, direction:'NW', temperature:'60'},
    {name: 'Place 2', lat: 36.15,  lng:-94 , wind_speed:45, direction:'N', temperature:'62'},
    {name: 'Place 3', lat: 36.12,  lng:-89 , wind_speed:55, direction:'SE', temperature:'59'}
    ];

然后，您可以对该对象进行迭代，并在每个循环上绘制一个标记

WindCollection.forEach(function(windplace) {
    var marker=new google.maps.Marker({position:{lat:windplace.lat, lng:windplace.lng}, clickable:true, map:map, animation:google.maps.Animation.DROP });
});

(下降动画只是为了一个戏剧性的入口(。

现在，每个数据点(或风点(都有一个标记。

最后，您可以在单击时将侦听器连接到标记以打开信息窗口

google.maps.event.addListener(marker,'click',function() {
    var infowindow = new google.maps.InfoWindow();
    var infolist=jQuery('<ul></ul>');
    for (attribute in windplace) {
        infolist.append('<li><b>'+attribute+'</b>: '+windplace[attribute]+'</li>');
    }
    infowindow.setContent('<div class="infowindow">'+infolist.html()+'</div>');
    infowindow.open(map, marker);
});

请注意，这必须在绘制标记的同一循环中完成，因为"windplace"变量只有在同一迭代中才有意义。如果以后需要使用该信息，则应该使标记继承windplace内容，这样标记将始终携带其原始信息。

marker.windplace = windplace;

例如，您可以在之后得到marker.windplace.wind_speed的值。

让我们把放在一起

http://bl.ocks.org/amenadiel/a4bd1e692e2db3e1dfe0

相关文章：