我在网上找到了这个代码，满足了我对网站一个功能的需求。
$(document).ready(function () {
var markers = []; // define global array in script tag so you can use it in whole page
var myCenter = new google.maps.LatLng(1.3000, 103.8000);
var mapProp = {
center: myCenter,
zoom: 6,
minZoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true
};
//google map object
var map = new google.maps.Map(document.getElementById("map"), mapProp);
//change event of input tag where type=file and id=filename
$("#filename").change(function (e) {
var ext = $("input#filename").val().split(".").pop().toLowerCase();
if ($.inArray(ext, ["csv"]) == -1) {
alert('Upload CSV');
return false;
}
if (e.target.files != undefined) {
var reader = new FileReader();
reader.onload = function (e) {
var csvval = e.target.result.split("\n");
var csvvalue;
for (var i = 0; i < csvval.length; i++) {
markers[i] = [];
csvvalue = csvval[i].split(",");
markers[i][0] = csvvalue[0]; //id
var lat = csvvalue[2]; //latitude
var lng = csvvalue[3]; //longitude
var code = csvvalue[0];
if (code.includes("AB")) {
var nsMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
} else if (code.includes('CD')) {
var ewMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
} else if (code.includes('EF')) {
var neMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
} else if (code.includes('GH')) {
var ccMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
} else if (code.includes('IJ')) {
var dtMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
} else if (code.includes('KL')) {
var cgMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
}
//markers[i][1] = new google.maps.Marker({
// position: new google.maps.LatLng(lat, lng),
// map: map
//});
}
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
});
此功能主要允许用户上传csv坐标文件，然后在地图上创建标记以标记这些位置。但是，没有明确的功能名称。这是html部分：
<input type="file" id="filename" name="filename" />
供用户选择要上传的.csv文件。我的问题是，如果我希望用户能够上传另一个输入.csv文件来做其他的东西，我该如何实现一组类似的代码？从根本上说它会是相同的，他们会上传一个.csv文件，并提取纬度和经度以确定输入中的各个位置，但我想在其他.csv文件中添加一些其他功能。我可以添加一个像
这样的函数名$(document).ready(function() readAllLocations { ... // for the FIRST .csv in
问题
，然后我第二次需要这个类似的功能，我只需添加另一个以
开头的脚本标签$(document).ready(function() secondFunction {....
和来自secondFunction的html调用onclick="secondFunction()"或者什么？我对JavaScript的经验很少，所以请原谅我，如果我的问题听起来很愚蠢。我一整天都在试图解决这个问题而且我无法做到。谢谢你们所有人！
答案 0 :(得分：0)
我认为你可以这样做（可能有不同的方式，这就是我现在能想到的）;
首先，您在HTML中使用不同的ID为不同的任务创建不同的input。
然后你把所有需要重复的代码放在每个输入中，在一个函数里面;
function processInput (selector, callback) {
$(selector).change(function (e) {
var ext = $(this).val().split(".").pop().toLowerCase();
// Here "this" refers to the selector.
if ($.inArray(ext, ["csv"]) == -1) {
alert('Upload CSV');
return false;
}
if (e.target.files != undefined) {
var reader = new FileReader();
reader.onload = function (e) {
var csvval = e.target.result.split("\n");
var csvvalue;
for (var i = 0; i < csvval.length; i++) {
markers[i] = [];
csvvalue = csvval[i].split(",");
markers[i][0] = csvvalue[0]; //id
var lat = csvvalue[2]; //latitude
var lng = csvvalue[3]; //longitude
var code = csvvalue[0];
if (code.includes("AB")) {
var nsMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
} else if (code.includes('CD')) {
var ewMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
} else if (code.includes('EF')) {
var neMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
} else if (code.includes('GH')) {
var ccMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
} else if (code.includes('IJ')) {
var dtMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
} else if (code.includes('KL')) {
var cgMarker = new google.maps.Marker({
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
position: new google.maps.LatLng(lat, lng),
map: map
});
}
// I am assuming this is where you wish to do different tasks,
// feel free to move the block below, to where you need.
if(typeof callback === 'function' && callback()){
// Here the "if" staement checks if "callback" is a function,
// you may remove it if you do not need to check.
callback(i);
// This is for the different tasks.
// We're passing "i" as parameter to use when we call the function.
}
//markers[i][1] = new google.maps.Marker({
// position: new google.maps.LatLng(lat, lng),
// map: map
//});
}
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
}
然后对于不同的任务（对于不同的输入），我们称这些函数为;
processInput("#filename", function(i) {
// ..And this is how you would call the function.
//markers[i][1] = new google.maps.Marker({
// position: new google.maps.LatLng(lat, lng),
// map: map
//});
});
processInput("#secondfile", function(i) {
// ..And as many times you need.
// Put the tasks you want to do for the input with id "#secondfile" below;
//markers[i][1] = new google.maps.Marker({
// position: new google.maps.LatLng(lat, lng),
// map: map
//});
});
您将上述所有内容放在$("#filename").change(function (e) { codes });所在的位置，如问题所示。
请注意，我并不完全理解jQuery的.change()是如何工作的，所以我试图不改变我认为与之相关的任何内容，如果问题中的代码按预期工作，这应该也可以。
另外请在实际使用前检查你的部分代码，我复制了它们，所以我可能犯了一些错误;但希望你能得到答案，并了解我的所作所为。
检查并告诉我，并询问您是否有任何问题！