google maps - Use GoogleMaps API from coordinates in a csv file in javascript

Question

Welcome To Ask or Share your Answers For Others

google maps - Use GoogleMaps API from coordinates in a csv file in javascript

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

google maps - Use GoogleMaps API from coordinates in a csv file in javascript

To be honest, I am not very familiar with JavaScript. But now I really need to use it to map a set of coordinates stored in my csv file, so I'll need JavaScript and GoogleMaps API.

The data I have in my csv is like this.

latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, so on.
latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, so on.
latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, so on.
.......... so on.

Where each line represents a route and latitude-x and longitude-x represent a location. I hope you get my point.

I kind of mixed the code I got from w3school, google official site, stackoverflow and many others, then I modified it. And what I got so far is the following.

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>


</head>

<body>

<input type="file" name="file" id="file">
<div id="googleMap" style="width:800px;height:580px;"></div>

<script type="text/javascript">

var coordinates = [];

document.getElementById('file').onload = function(){

var file = this.files[0];

  var reader = new FileReader();
  reader.onchange = function(progressEvent){
    // Entire file
    //console.log(this.result);


    var lines = this.result.split('
');

    for(var line = 0; line < lines.length; line++){
    
    var point = this.result.split(',');

    var count =0;

    for(var dua=0; dua<point.length; dua++){
    if(dua%2==0){
    var latitude = point[dua];
    }else{
    var longitude = point[dua];
    coordinates[count] = new google.maps.LatLng(latitude+","+longitude);
    console.log(coordinates[count]);
    count++;
    }
    }

    }
  };
reader.readAsText(file);
};


function getCoor(){
return coordinates;
}

function initialize(){
var mapProp = {

  center:new google.maps.LatLng(8.611911,41.146056),
  zoom:6,
  mapTypeId:google.maps.MapTypeId.ROADMAP
};
  
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);


var myTrip = [];
var coordinates = getCoor();
for(var c=0; c<coordinates.length; c++){
myTrip += coordinates[c];
}


//console.log(myTrip);
var flightPath=new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:8
});

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

</body>
</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:33:52+0000

Using the file reader code from the answer to Chrome FileReader

you need to wait for the DOM to be rendered before searching it for elements (move anything using document.getElementById inside the initialize function).
You have issues with your code for processing the file contents, for one coordinates[count] = new google.maps.LatLng(latitude+","+longitude); is not valid, the google.maps.LatLng takes two numbers as arguments, not a comma separated string.

proof of concept fiddle

code snippet:

var map;

function getCoor() {
  return coordinates;
}

function handle_files(files) {
  for (i = 0; i < files.length; i++) {
    file = files[i];
    console.log(file);
    var reader = new FileReader();
    ret = [];
    reader.onload = function(e) {
      console.log(e.target.result);
      var lines = e.target.result.split('
');
      var bounds = new google.maps.LatLngBounds();
      for (var line = 0; line < lines.length; line++) {

        var point = lines[line].split(',');

        var count = 0;
        var coordinates = [];
        for (var dua = 0; dua < point.length; dua++) {
          if (dua % 2 == 0) {
            var latitude = point[dua];
          } else {
            var longitude = point[dua];
            coordinates[count] = new google.maps.LatLng(latitude, longitude);
            console.log(coordinates[count]);
            count++;
          }
        }
        var myTrip = [];
        for (var c = 0; c < coordinates.length; c++) {
          myTrip.push(coordinates[c]);
          bounds.extend(coordinates[c]);
        }
        map.fitBounds(bounds);

        //console.log(myTrip);
        var flightPath = new google.maps.Polyline({
          path: myTrip,
          strokeColor: "#0000FF",
          strokeOpacity: 0.8,
          strokeWeight: 8
        });

        flightPath.setMap(map);

      }

    }
    reader.onerror = function(stuff) {
      console.log("error", stuff);
      console.log(stuff.getMessage());
    }
    reader.readAsText(file); //readAsdataURL
  }

}

function initialize() {

  var mapProp = {

    center: new google.maps.LatLng(8.611911, 41.146056),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="file" name="file" id="file" onchange="handle_files(this.files)" />
<div id="googleMap"></div>

Categories

google maps - Use GoogleMaps API from coordinates in a csv file in javascript

google maps - Use GoogleMaps API from coordinates in a csv file in javascript

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags