如何使用Javascript使用.csv文件制作Google Map

时间:2017-10-15 00:02:23

标签: javascript google-maps-api-3 read.csv

我正在尝试使用Javascript制作谷歌地图。我想使用.csv文件来绘制纬度和逻辑。当我对值进行硬编码时,我得到了点,但我不确定如何使用.csv文件绘制它们。我的.csv文件包含超过76000个坐标。

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
    height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
   }
   </style>
   </head>
   <body>
   <div id="map"></div>
   <script>


   function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: 29.766083, lng: -95.358810},
      mapTypeId: 'terrain'
    });

    var flightPlanCoordinates = [
      {lat: 29.718922, lng: -95.339162},
      {lat: 29.71683047, lng: -95.40166506},
      {lat: 29.748425, lng: -95.677353},
      {lat: 29.739545, lng: -95.462716}
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    flightPath.setMap(map);
   }
  </script>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?
  key=AIzaSyAbeZY_drCHzHUoWYl6EMgMdZsJxaVt3pk&callback=initMap">
  </script>
  </body>
  </html>



   [enter image description here][1]


  [1]: https://i.stack.imgur.com/dU38w.png

0 个答案:

没有答案