使用FileReader加载CSV以使地图标记的JS对象（Maps API） [英] Loading CSV with FileReader to make JS Objects for Map Markers (Maps API)
本文介绍了使用FileReader加载CSV以使地图标记的JS对象（Maps API）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
基本上，我试图加载一个csv文件，将其解析为一个js对象数组，并使用这些对象使用Google Maps API制作地图标记。
加载工作，解析工作，所有的值是正确的（据我所知），我已经控制台日志死亡，我得到我想要的值，但...我的地图不加载。
我认为可能是因为时机？像地图未初始化或正在正确加载。
我偶尔会从连接超时和安全错误中获取Maps API的错误，但刷新页面并重新加载csv似乎清楚起来。
这是JS：
.onload = function（）{
var fileInput = document.getElementById（'fileInput'）;
var fileDisplayArea = document.getElementById（'fileDisplayArea'）;
fileInput.addEventListener（'change'，function（e）{
var file = fileInput.files [0];
var textType = /csv.*/;
var companies;
//检查csv文件如果是这样，然后运行程序如果没有，显示错误
if（file.type.match（textType））{
var reader = new FileReader（）;
reader.onload = function（e）{
var text = reader.result;
// Log
// console.log（text）;
//解析csv文件并将对象存储在公司数组中
function csvParse（csv）{
var lines = csv.split（\\\
）;
//记录调试成功
// console.log（lines）;
var result = [];
var headers = lines [0] .split（，）;
for（var i = 1; i& length; i ++）{
var obj = {};
var currentline = lines [i] .split（，）;
for（var j = j < headers.length; j ++）{
obj [headers [j]] = currentline [j];
}
result.push（obj）;
}
返回结果;
}
//将对象存储在公司中。
companies = csvParse（text）;
//记录调试。成功。
// console.log（companies）;
var siteCircle;
var companyMarker;
//记录调试。成功。
// console.log（companies [1] .sites）;
function initialize（）{
//创建北美地图。
var mapOptions = {
zoom：5，
center：new google.maps.LatLng（37.09024，-95.712891），
mapTypeId：google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）;
//为公司中的每个值构造一个圆和标记。
for（var company in companies）{
var latitude =（parseFloat（companies [company] .lat））。toFixed（6）;
var longitude =（parseFloat（companies [company] .long））。toFixed（6）;
//记录调试。成功。
/ / console.log（latitude）;
// console.log（longitude）;
// console.log（parseInt（companies [company] .sites））;
var circleStyle = {
//设置常量选项。
strokeColor：'＃000000'，
fillColor：'＃000000'，
strokeOpacity：0.8，
strokeWeight：2，
fillOpacity：0.35，
map：map，
center：new google.maps.LatLng（latitude，longitude），
radius：parseInt（companies [company] .sites）* 100
};
//还没有。圈子第一。
/ *
var markerOptions = {
//将标记放置在相同位置并带有标签。
position：new google.maps.LatLng（parseFloat（companies [company] .lat），parseFloat（companies [company] .long）），
map：map，
title： company] .name，
};
* /
//记录调试。成功。
// console.log（circleStyle）
//添加圆圈和标记到地图。重复。
siteCircle = new google.maps.Circle（circleStyle）;
//圈子需要先填充。
// companyMarker = new google.maps.Marker（markerOptions）;
}
}
//运行映射。
initialize（）;
}
reader.readAsText（file）;
} else {
fileDisplayArea.innerText =文件不支持！
}
}）;
}
这里还有一个包含所有文件的gist： https://gist.github.com/mhelmetag/20eeae8cd4c901fb1094
解决方案
您发布的代码不包含所有问题。
-
我注释掉了
if（file.type.match（textType））{给我一个错误：文件不支持！ 小提琴 -
csvParse函数doesn' t正确解析文件的最后一个条目，您将获得NaN作为经度（因此google.maps.LatLngs无效）
-
已删除。 tofixed（6）parseFloat调用后，改变：
code> var latitude =（parseFloat（companies [company] .lat））。toFixed（6）;
var longitude =（parseFloat（companies [company] .long））。toFixed（6）;
To：
code> var latitude = parseFloat（companies [company] .lat）;
var longitude = parseFloat（companies [company] .long）;
-
一个大小，所以一旦经度的问题是固定的，你不能看到它。
-
因为你有一个问题，下面的行导致与地图控件的工件，我删除它：
img {
max-width：100％;
}
使用的数据文件：
code> name，type，sites，lat，long，dummy
Yum Brands，QSR，36000,38.198117，-85.695723，nothing
McDonalds，QSR，11772,41.848117，-87.944818，nothing
Dollar General，Discount，8414,36.309512，-86.699107，nothing
WalMart，Big Box，7873,36.365399，-94.217752，nothing
Walgreens，Drug Store，7500,42.156776，-87.871079，nothing
Starbucks，QSR，6793,47.581000，-122.335855，nothing
Dunkin Brands，QSR，6500,42.207285，-71.129786，nothing
CVS，Drug Store，6301,41.990542，-71.477562，nothing
Gamestop，Specialty，6207,32.902302，-97.087347，nothing
7-Eleven，C-Store，6100,32.791810，-96.795768，nothing
家庭美元，折扣，6000,35.131827， 80.731703，nothing
Couches Tarde，C-Store，5600,33.335586，-111.955955，nothing
working code snippet：
window.onload = function（）{var fileInput = document.getElementById（'fileInput'）; var fileDisplayArea = document.getElementById（'fileDisplayArea'）; fileInput.addEventListener（'change'，function（e）{var file = fileInput.files [0]; var textType = /csv.*/; var companies; //检查csv文件如果是这样，不是，显示错误。// if（file.type.match（textType））{var reader = new FileReader（）; reader.onload = function（e）{var text = reader.result; // Log for debug。 。// console.log（text）; //解析csv文件并使对象存储在公司数组中。function csvParse（csv）{var lines = csv.split（\\\
）; // Log for debug。成功// console.log（lines）; var result = []; var headers = lines [0] .split（，）; for（var i = 1; i< lines.length; i ++）{var obj = {}; var currentline = lines [i] .split（，）; for（var j = 0; j< headers.length; j ++）{obj [headers [j]] = currentline [j] } result.push（obj）;} return result;} //将对象存储在公司中companies = csvParse（text）; // Log for debug。成功。 // console.log（companies）; var siteCircle; var companyMarker; // Log for debug。成功。 // console.log（companies [1] .sites）; function initialize（）{//创建北美地图。 var mapOptions = {zoom：5，center：new google.maps.LatLng（37.09024，-95.712891），mapTypeId：google.maps.MapTypeId.TERRAIN} var map = new google.maps.Map（document.getElementById（'map- canvas'），mapOptions）; //在公司中为每个值构造一个圆和标记。 for（var company in companies）{var latitude = parseFloat（companies [company] .lat）; var longitude = parseFloat（companies [company] .long）; // Log for debug。成功。 // console.log（latitude）; // console.log（longitude）; // console.log（parseInt（companies [company] .sites））; var circleStyle = {//设置常量选项。 strokeColor：'＃000000'，fillColor：'＃000000'，strokeOpacity：0.8，strokeWeight：2，fillOpacity：0.35，map：map，center：new google.maps.LatLng（latitude，longitude），radius：parseInt（companies [公司] .sites）* 100}; // 还没。圈子第一。 / * var markerOptions = {//将标记放置在相同位置并带有标签。 position：new google.maps.LatLng（parseFloat（companies [company] .lat），parseFloat（companies [company] .long）），map：map，title：companies [company] .name， * / //日志以进行调试。成功。 // console.log（circleStyle）//添加圆和标记到地图。重复。 siteCircle = new google.maps.Circle（circleStyle）; //圈子需要先填充。 // companyMarker = new google.maps.Marker（markerOptions）; }} //运行映射。初始化（）; } reader.readAsText（file）; / *} else {fileDisplayArea.innerText =文件不支持！ } * /}）;} / * test.csvname，type，sites，lat，longYum Brands，QSR，36000,38.198117，-85.695723McDonalds，QSR，11772,41.848117，-87.944818 Dollar General，Discount，8414,36.309512， 86.699107WalMart，Big Box，7873,36.365399，-94.217752Walgreens，Drug Store，7500,42.156776，-87.871079Starbucks，QSR，6793,47.581000，-122.335855 Dunkin Brands，QSR，6500,42.207285，-71.129786CVS，Drug Store，6301 ，41.990542，-71.477562Gamestop，Specialty，6207,32.902302，-97.0873477-Eleven，C-Store，6100,32.791810，-96.795768家庭美元折扣，6000,35.131827，-80.731703Couche Tarde，C-商店，5600,33.335586， -111.955955 * /
html {font-family：Helvetica， Arial，无衬线font-size：100％; background：＃333;} html，bofy {height：100％; width：100％;}＃page-wrapper {width：600px;背景：#FFF; padding：1em; margin：1em auto; min-height：300px; border-top：5px solid＃69c773; box-shadow：0 2px 10px rgba（0，0，0，0.8）;} h1 {margin-top：0;}＃fileDisplayArea {margin-top：2em; width：100％; overflow-x：auto;}＃map-canvas {height：100％; margin：0px; padding：0px}
< script src = //maps.googleapis.com/maps/api/js\"> ;</script> ;<div id =page-wrapper> < h1> CSV文件到JS对象测试< / h1> < div>选择CSV文件：< input type =fileid =fileInput/> < / div> < pre id =fileDisplayArea>< pre> < / div> < div id =map-canvasstyle =height：500px; width：500px;>< / div>
>
Basically I'm trying to load a csv file, parse it to an array of js objects and use those objects to make map markers with the Google Maps API.
The loading works, the parsing works, all the values are correct (to my knowledge), I've been console logging to death and I get the values that I want but... my map isn't loading.
I think it may be because of timing? Like the map isn't initializing or being loaded correctly.
I occasionally get errors about connections timing out and security errors from the Maps API but refreshing the page and reloading the csv seems to clear that up. The errors come and go.
Here's the JS:
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /csv.*/;
var companies;
// Check if csv file. If so, then run program. If not, show error.
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
var text = reader.result;
// Log for debug. Success.
// console.log(text);
// Parse csv file and make objects to store in companies array.
function csvParse(csv) {
var lines = csv.split("\n");
// Log for debug. Success.
// console.log(lines);
var result = [];
var headers = lines[0].split(",");
for (var i = 1; i < lines.length; i++) {
var obj = {};
var currentline = lines[i].split(",");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
return result;
}
// Store objects in companies.
companies = csvParse(text);
// Log for debug. Success.
// console.log(companies);
var siteCircle;
var companyMarker;
// Log for debug. Success.
// console.log(companies[1].sites);
function initialize() {
// Create the map of north america.
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Construct a circle and marker for each value in companies.
for (var company in companies) {
var latitude = (parseFloat(companies[company].lat)).toFixed(6);
var longitude = (parseFloat(companies[company].long)).toFixed(6);
// Log for debug. Success.
// console.log(latitude);
// console.log(longitude);
// console.log(parseInt(companies[company].sites));
var circleStyle = {
// Set constant options.
strokeColor: '#000000',
fillColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(latitude, longitude),
radius: parseInt(companies[company].sites) * 100
};
// Not yet. circles first.
/*
var markerOptions = {
// Place marker at same loacation and with a label.
position: new google.maps.LatLng(parseFloat(companies[company].lat), parseFloat(companies[company].long)),
map: map,
title: companies[company].name,
};
*/
// Log for debug. Success.
// console.log(circleStyle)
// Add circle and marker to map. Repeat.
siteCircle = new google.maps.Circle(circleStyle);
// Circles need to populate first.
// companyMarker = new google.maps.Marker(markerOptions);
}
}
// Run mapping.
initialize();
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!";
}
});
}
Also here is a gist with all the files : https://gist.github.com/mhelmetag/20eeae8cd4c901fb1094
Thanks so much in advance!
解决方案
Your posted code does not contain all the issues.
I commented out the
if (file.type.match(textType)) {test, that was giving me an error: "File not supported!" fiddlethe csvParse function doesn't correctly parse the last entry of the file, you are getting NaN for the longitude (so the google.maps.LatLngs are not valid)
removed the .toFixed(6) after the parseFloat call, changed:
var latitude = (parseFloat(companies[company].lat)).toFixed(6);
var longitude = (parseFloat(companies[company].long)).toFixed(6);
To:
var latitude = parseFloat(companies[company].lat);
var longitude = parseFloat(companies[company].long);
your map doesn't have a size, so once the issue with "longitude" is fixed, you can't see it.
as an aside you have an issue with your css, the line below causes artifacts with the map controls, I removed it:
img { max-width: 100%; }
Data file used:
name,type,sites,lat,long,dummy
Yum Brands,QSR,36000,38.198117,-85.695723,nothing
McDonalds,QSR,11772,41.848117,-87.944818,nothing
Dollar General,Discount,8414,36.309512,-86.699107,nothing
WalMart,Big Box,7873,36.365399,-94.217752,nothing
Walgreens,Drug Store,7500,42.156776,-87.871079,nothing
Starbucks,QSR,6793,47.581000,-122.335855,nothing
Dunkin Brands,QSR,6500,42.207285,-71.129786,nothing
CVS,Drug Store,6301,41.990542,-71.477562,nothing
Gamestop,Specialty,6207,32.902302,-97.087347,nothing
7-Eleven,C-Store,6100,32.791810,-96.795768,nothing
Family Dollar,Discount,6000,35.131827,-80.731703,nothing
Couche Tarde,C-Store,5600,33.335586,-111.955955,nothing
working code snippet:
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /csv.*/;
var companies;
// Check if csv file. If so, then run program. If not, show error.
// if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
var text = reader.result;
// Log for debug. Success.
// console.log(text);
// Parse csv file and make objects to store in companies array.
function csvParse(csv) {
var lines = csv.split("\n");
// Log for debug. Success.
// console.log(lines);
var result = [];
var headers = lines[0].split(",");
for (var i = 1; i < lines.length; i++) {
var obj = {};
var currentline = lines[i].split(",");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
return result;
}
// Store objects in companies.
companies = csvParse(text);
// Log for debug. Success.
// console.log(companies);
var siteCircle;
var companyMarker;
// Log for debug. Success.
// console.log(companies[1].sites);
function initialize() {
// Create the map of north america.
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Construct a circle and marker for each value in companies.
for (var company in companies) {
var latitude = parseFloat(companies[company].lat);
var longitude = parseFloat(companies[company].long);
// Log for debug. Success.
// console.log(latitude);
// console.log(longitude);
// console.log(parseInt(companies[company].sites));
var circleStyle = {
// Set constant options.
strokeColor: '#000000',
fillColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(latitude, longitude),
radius: parseInt(companies[company].sites) * 100
};
// Not yet. circles first.
/*
var markerOptions = {
// Place marker at same loacation and with a label.
position: new google.maps.LatLng(parseFloat(companies[company].lat), parseFloat(companies[company].long)),
map: map,
title: companies[company].name,
};
*/
// Log for debug. Success.
// console.log(circleStyle)
// Add circle and marker to map. Repeat.
siteCircle = new google.maps.Circle(circleStyle);
// Circles need to populate first.
// companyMarker = new google.maps.Marker(markerOptions);
}
}
// Run mapping.
initialize();
}
reader.readAsText(file);
/* } else {
fileDisplayArea.innerText = "File not supported!";
}
*/
});
}
/* test.csv
name,type,sites,lat,long
Yum Brands,QSR,36000,38.198117,-85.695723
McDonalds,QSR,11772,41.848117,-87.944818
Dollar General,Discount,8414,36.309512,-86.699107
WalMart,Big Box,7873,36.365399,-94.217752
Walgreens,Drug Store,7500,42.156776,-87.871079
Starbucks,QSR,6793,47.581000,-122.335855
Dunkin Brands,QSR,6500,42.207285,-71.129786
CVS,Drug Store,6301,41.990542,-71.477562
Gamestop,Specialty,6207,32.902302,-97.087347
7-Eleven,C-Store,6100,32.791810,-96.795768
Family Dollar,Discount,6000,35.131827,-80.731703
Couche Tarde,C-Store,5600,33.335586,-111.955955
*/
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
background: #333;
}
html,
bofy {
height: 100%;
width: 100%;
}
#page-wrapper {
width: 600px;
background: #FFF;
padding: 1em;
margin: 1em auto;
min-height: 300px;
border-top: 5px solid #69c773;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
h1 {
margin-top: 0;
}
#fileDisplayArea {
margin-top: 2em;
width: 100%;
overflow-x: auto;
}
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="page-wrapper">
<h1>CSV File to JS Object Test</h1>
<div>
Select a CSV file:
<input type="file" id="fileInput" />
</div>
<pre id="fileDisplayArea"><pre>
</div>
<div id="map-canvas" style="height: 500px; width: 500px;"></div>
这篇关于使用FileReader加载CSV以使地图标记的JS对象（Maps API）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
