使用javascript在Google Map中获取多段线动画时出错_Javascript_Google Maps_Csv

使用javascript在Google Map中获取多段线动画时出错

javascript google-maps csv

使用javascript在Google Map中获取多段线动画时出错,javascript,google-maps,csv,Javascript,Google Maps,Csv,我不熟悉谷歌地图和Javascript。我正在做一个项目，在这个项目中，我必须使用纬度和经度在地图上绘制一条移动路径。我有超过76000个坐标。所以我试着在这个链接上解释-：我的坐标有一个.csv文件。如果我有硬编码的值，我得到地图。当我试图导入.csv文件并绘制地图时，会出现错误我收到以下错误消息-：（1）未捕获范围错误：超过最大调用堆栈大小（2） InvalidValueError:setCenter:不是LatLng或LatLngLiteral:在属性lat:不是数字中

我不熟悉谷歌地图和Javascript。我正在做一个项目，在这个项目中，我必须使用纬度和经度在地图上绘制一条移动路径。我有超过76000个坐标。所以我试着在这个链接上解释-：

我的坐标有一个.csv文件。如果我有硬编码的值，我得到地图。当我试图导入.csv文件并绘制地图时，会出现错误

我收到以下错误消息-：（1）未捕获范围错误：超过最大调用堆栈大小（2） InvalidValueError:setCenter:不是LatLng或LatLngLiteral:在属性lat:不是数字中

    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>

横向、纵向、纵向 29.718922，-95.339162，呃 29.71683047，-95.40166506，RU 30.0575359，-95.1902986千瓦 29.748425，-95.677353，GB 德国劳埃德船级社，29.739545，-95.462716 动画路线 html，body，#map{ 身高：100%；边际：0px；填充：0px } 函数初始化（） { var map=new google.maps.map（document.getElementById（“map”）， { 中心：{lat:pathCoords[0]。lat，lng:pathCoords[0]。lng}，缩放：10， mapTypeId:google.maps.mapTypeId.ROADMAP }); 自动刷新（map）； } 功能移动标记（地图、标记、板条） { 标记器设置位置（板条）； panTo地图（拉丁美洲）； } 函数自动刷新（map） { 变量i，路径，标记； route=新建google.maps.Polyline({ 路径：[]，测地线：正确， strokeColor:“#FF0000”，笔划不透明度：1.0，冲程重量：2，可编辑：false，地图：地图 }); marker=new google.maps.marker（{map:map，icon:http://maps.google.com/ mapfiles/ms/micons/blue.png“}）；对于（i=0；i您的问题是在.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

事实并非如此。方法是你向我们展示你的代码，告诉我们它是如何满足要求的。@lit我已经用我的代码和收到的错误消息更新了这篇文章。你能看一下它，让我知道我错在哪里吗。@邓肯你能看一下这段代码并提供一些帮助吗？我正在尝试在谷歌地图路径上进行鼠标悬停，并在暂停后恢复路径。我已经把我的问题贴在这里了。你能看一下吗。谢谢！