Question

我正在尝试上传一个Excel电子表格，其中包含学生姓名的地理位置，以及他们从在线课程到Google Javascript API的“顶级技能”。

最终，我希望每个位置都有一个与之关联的弹出框，显示学生姓名及其最高技能。

根据API我可以告诉我，我必须使用这样的数据阵列来绘制标记：

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格式而无需手动编写每个位置？
如何将这些特定位置与学生姓名和技能列表相关联？

Answer 1

您可以使用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://farm1.staticflickr.com/76/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专辑中抓取图像以填充弹出框（使用Flickr API）。

谷歌csv转json转换器。我还建议使用infobubble而不是infowindow，因为前者更通用。对于群集效果，您可以将MarkerClustererPlus用于Google Maps V3

Answer 2

您可以使用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
            });
        }
    });

Answer 3

从“为脚本提供数据”的观点来看，可能不需要“上传”。您只需将简单文本“复制”到客户端PC的剪贴板即可。然后，一些安全松散的浏览器可以查看如下：

“clipboardData.getData（ '文本'）;”

或者，如果你不想要这么危险的过程，您可以创建一个可见的窗格，如此页面的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（''）隐藏起来。

使用自定义信息框从Excel批量上传标记

3 个答案: