使用javascript在谷歌地圖中的多段線動畫獲取錯誤

-1

我是Google地圖和Javascript的新手。我正在研究一個項目，在該項目中，我必須使用緯度和經度繪製地圖上的移動路徑。我有超過76000個座標。所以我試着在這個鏈接上的解釋 - ：Animate route on Google Maps 使用javascript在谷歌地圖中的多段線動畫獲取錯誤

我有我的座標.csv文件。如果我有硬編碼的價值，我得到的地圖。當我試圖導入我的.csv文件並繪製地圖時，我收到錯誤。

我正在以下錯誤消息 - ：（1）未捕獲的RangeError：最大調用堆棧大小超過（2）InvalidValueError：setCenter：不是經緯度或LatLngLiteral：在屬性緯度：不是數字

lat,lon,loc 
    29.718922,-95.339162,UH 
    29.71683047,-95.40166506,RU 
    30.0575359,-95.1902986,KW 
    29.748425,-95.677353,GB 
    29.739545,-95.462716,GL 



    <!DOCTYPE html> 
    <html> 
    <head> 
    <title>Animated route</title> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
    html, body, #map { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
    } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js? 
    v=3.exp&amp;libraries=geometry"></script> 
    <script> 
    function initialize() 
    { 
     var map = new google.maps.Map(document.getElementById("map"), 
     { 
      center: {lat: pathCoords[0].lat, lng: pathCoords[0].lng}, 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     autoRefresh(map); 
    } 


    function moveMarker(map, marker, latlng) 
    { 
     marker.setPosition(latlng); 
     map.panTo(latlng); 
    } 


    function autoRefresh(map) 
    { 
     var i, route, marker; 

     route = new google.maps.Polyline({ 
      path: [], 
      geodesic : true, 
      strokeColor: '#FF0000', 
      strokeOpacity: 1.0, 
      strokeWeight: 2, 
      editable: false, 
      map:map 
     }); 

     marker=new google.maps.Marker({map:map,icon:"http://maps.google.com/ 
     mapfiles/ms/micons/blue.png"}); 
     for (i = 0; i < pathCoords.length; i++) { 
      setTimeout(function (coords) 
      { 
       var latlng = new google.maps.LatLng(coords.lat, coords.lng); 
       route.getPath().push(latlng); 
       moveMarker(map, marker, latlng); 
      }, 2000 * i, pathCoords[i]); 
     } 
    } 


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

    var pathCoords=[]; 
    d3.csv("houston.csv", function(data) 
    { 
     data.map(function(d) 
     { 
      pathCoords.push([d.lat,d.lon]); 


     }) 
     console.log(pathCoords); 

    }); 

    /*var pathCoords = [ 
     { 
     "lat": 29.718922, 
     "lng": -95.339162 
     }, 
     { 
     "lat": 29.71683047, 
     "lng": -95.40166506 
     }, 
     { 
     "lat": 30.0575359, 
     "lng": -95.1902986 
     }, 
     { 
     "lat": 8.52426, 
     "lng": 76.93668000000001 
     } 
    ];*/ 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    </body> 
    </html>

來源

2017-10-16 Shivani Arora

這不是SO的工作原理。方法是，你向我們展示你的代碼，並告訴它如何或不符合要求。 – lit

@lit我已經用我的代碼和我得到的錯誤消息更新了這篇文章。你可以請通過它，讓我知道我錯了。 –

@duncan你可以看看這段代碼並提供一些幫助嗎？ –

你的問題是你的.csv文件末尾有一個額外的空白行。

Line number Content 
76809  30.6420046,-96.4751224 
76810  30.6420046,-96.4751224 
76811  30.6420046,-96.4751224 
76812

刪除最後一行，它應該沒有錯誤地工作。

Line number Content 
76809  30.6420046,-96.4751224 
76810  30.6420046,-96.4751224 
76811  30.6420046,-96.4751224

來源

2017-10-24 20:43:58 duncan

我試圖在google map路徑上做mouseover，並且在暫停它之後重新開始路徑。在這裏發佈我的問題https://stackoverflow.com/questions/47082870/not-able-to-resume-and-do-mouseover-on-google-path-using-javascript。你可以請通過它。非常感謝！ –

使用javascript在谷歌地圖中的多段線動畫獲取錯誤

回答

相關問題