3

我正在尝试将包含学生姓名、地理位置以及在线课程中的“顶级技能”的 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
      });
    }

几个问题：

  1. 是否有更快的方法将 Excel 电子表格数据上传为 Javascript 格式，而无需手动写入每个位置？
  2. 如何将这些特定位置与学生姓名和技能列表相关联？
4

3 回答 3

3

您可以使用 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/"
},

ETC...

然后，您可以在 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，因为前者更通用。对于聚类效果，您可以使用 MarkerClusterPlus for Google Maps V3

于 2013-07-03T19:12:40.957 回答
1

您可以使用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
            });
        }
    });
于 2014-12-17T08:53:54.680 回答
0

从“向脚本提供数据”的角度来看，可能不需要“上传”。您只需将一个简单的文本“复制”到客户端 PC 的剪贴板。然后，一些安全松散的浏览器可以窥视它，如下所示：

“剪贴板数据.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('') 隐藏它。

于 2013-07-04T01:31:24.763 回答