JavaScriptを使用してGoogleマップのポリラインのアニメーションにエラーが発生しました

-1

GoogleマップとJavascriptを初めて使用しています。私は、緯度と経度を使用して地図上に移動パスをプロットする必要があるプロジェクトに取り組んでいます。私は76000以上の座標を持っています。だから私はこのリンクの説明を試みた：Animate route on Google Maps JavaScriptを使用してGoogleマップのポリラインのアニメーションにエラーが発生しました

私の座標の.csvファイルがあります。値をハードコードしていれば、私は地図を得る。 .csvファイルをインポートしてマップをプロットしようとすると、エラーが発生します。

私は、次のエラーメッセージ - を取得しています：は、（1）キャッチされない例外RangeErrorは：プロパティLATに：setCenter：ない緯度経度やLatLngLiteral最大コールスタックサイズは（2）InvalidValueErrorを超えていない数

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

これはどのように動作するのではありません。この方法論は、コードを表示し、要件をどのように満たしているか、または満たしていないかを伝えることです。 – 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マップパス上でmouseoverをやろうとしていて、一時停止後にパスを再開しようとしています。私の質問はこちらhttps://stackoverflow.com/questions/47082870/not-able-to-resume-and-do-mouseover-on-google-path-using-javascriptに投稿しました。あなたはそれを通過してくださいできますか？どうもありがとう！ –

JavaScriptを使用してGoogleマップのポリラインのアニメーションにエラーが発生しました

答えて

関連する問題