javascript — загрузка CSV с помощью FileReader для создания объектов JS для маркеров карты (Maps API)

Загрузка CSV с FileReader для создания объектов JS для маркеров карты (Maps API)

В основном я пытаюсь загрузить CSV-файл, разобрать его в массиве объектов js и использовать эти объекты для создания маркеров карты с помощью API Карт Google.

Загрузка работает, синтаксический анализ работает, все значения верны (насколько я знаю), я дошел до консольной регистрации и получаю значения, которые хочу, но … моя карта не загружается.

Я думаю, что это может быть из-за времени? Как будто карта не инициализируется или загружается неправильно.

Иногда я получаю ошибки об истечении времени ожидания соединения и об ошибках безопасности от API Карт, но обновление страницы и перезагрузка csv, кажется, проясняют это. Ошибки приходят и уходят.

Вот 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 {amp}lt; lines.length; i  ) { var obj = {}; var currentline = lines[i].split(","); for (var j = 0; j {amp}lt; 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!"; } }); } 

Также здесь есть суть всех файлов: https://gist.github.com/mhelmetag/20eeae8cd4c901fb1094

Большое спасибо заранее!

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector