загрузить CSV-файл и добавить несколько маркеров на Google Maps - PullRequest
Новая
       10

загрузить CSV-файл и добавить несколько маркеров на Google Maps

0 голосов
/ 16 мая 2018

Итак, я пытаюсь добавить несколько мест на мою карту.Пользователь может загрузить CSV-файл (в моем определенном формате, конечно), но по некоторым причинам он не работает.

Для запуска этого кода вам необходимо использовать API-ключ Google Maps.Я использую jQuery, чтобы прочитать файл и разобрать его, а затем, пока я зацикливаю его, я пытаюсь добавить маркеры безуспешно.

Буду признателен за вашу любезную помощь. 

<code>     <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
    <script src="jquery.csv.js"></script>
</head>
<body>

<div id="page-wrapper">

  <h1>CSV File to JS Object Test</h1>
  <div>
    Select a CSV file:

  </div>
  <pre id="fileDisplayArea">
function myMap () {var myCenter = new google.maps.LatLng (34.0742,32.800);var mapCanvas = document.getElementById ("map");var mapOptions = {center: myCenter, zoom: 6, panControl: true, zoomControl: true, zoomControlOptions: {style: google.maps.ZoomControlStyle.LARGE}, mapTypeControl: true, scaleControl: true, streetViewControl: true, OverviewMapControl: true,rotateControl: true};var map = new google.maps.Map (mapCanvas, mapOptions);var marker = new google.maps.Marker ({position: myCenter, animation: google.maps.Animation.BOUNCE});marker.setMap (карта);var infowindow = new google.maps.InfoWindow ({content: "Hello World!"});google.maps.event.addListener (маркер, 'click', function () {infowindow.open (карта, маркер);});} $ (document) .ready (function () {if (isAPIAvailable ()) {$ ('# files'). bind ('change', handleFileSelect);}});function isAPIAvailable () {// Проверка поддержки различных API файлов.if (window.File && window.FileReader && window.FileList && window.Blob) {// Большой успех!Все файловые API поддерживаются.вернуть истину;} else {// source: доступность File API - http://caniuse.com/#feat=fileapi // source: Наличие - http://html5doctor.com/the-output-element/ document.writeln ('API HTML5, используемые в этой форме, доступны только в следующих браузерах:«);// 6.0 Файловый API и 13.0 document.writeln ('- Google Chrome: 13.0 или более поздняя версия«);// 3.6 Файловый API & 6.0 document.writeln ('- Mozilla Firefox: 6.0 или более поздняя версия«);// 10.0 Файловый API и 10.0 document.writeln ('- Internet Explorer: не поддерживается (в 10.0 ожидается частичная поддержка)«);//?Файловый API & 5.1 document.writeln ('- Safari: не поддерживается«);//?Файловый API & 9.2 document.writeln ('- Opera: не поддерживается');вернуть ложь;}} function handleFileSelect (evt) {var files = evt.target.files;// FileList объект var file = files [0];// читаем метаданные файла var output = '' output + = ' ' + escape (file.name) + '\ п ';output + = '- FileType:' + (file.type || 'n / a') + '\ п ';output + = '- FileSize:' + file.size + 'байтов\ п ';output + = '- LastModified:' + (file.lastModifiedDate? file.lastModifiedDate.toLocaleDateString (): 'n / a') + '\ п ';// читаем содержимое файла printTable (file);// опубликовать результаты $ ('# list'). append (output);} function printTable (file) {var reader = new FileReader ();reader.readAsText (файл);reader.onload = function (event) {var csv = event.target.result;var data = $ .csv.toArrays (csv);var html = '';for (переменная строка в данных) {html + = ' \ r \ n';console.log (данные [строка] [2], данные [строка] [3], данные [строка] [4]);marker = new google.maps.Marker ({position: new google.maps.LatLng (parseFloat (data [row] [3]), parseFloat (data [row] [4])), setMap: map});for (var item в data [row]) {html + = '' + data [row] [item] + ' \ r \ n';} html + = ' \ r \ n';} $ ('# contents'). html (html);};reader.onerror = function () {alert ('Unable to read' + file.fileName);};}

1 Ответ

0 голосов
/ 16 мая 2018

В вашем коде есть опечатка. Не существует setMap свойства google.maps.Marker (оно должно быть map): 

marker = new google.maps.Marker({
  position: new google.maps.LatLng(parseFloat(data[row][3]), parseFloat(data[row][4])),
  setMap: map
});

должно быть: 

marker = new google.maps.Marker({
  position: new google.maps.LatLng(parseFloat(data[row][3]), parseFloat(data[row][4])),
  map: map
});
...