Javascript 无法使用.csv生成有关时间的动画谷歌地图_Javascript_Google Maps_Csv

Javascript 无法使用.csv生成有关时间的动画谷歌地图

javascript google-maps csv

Javascript 无法使用.csv生成有关时间的动画谷歌地图,javascript,google-maps,csv,Javascript,Google Maps,Csv,我正在尝试使用.csv中的数据制作一个动画谷歌地图。路径应随时间的增加而移动。此外，我应该找到路径，直到在文本框中输入的时间段。因此，如果我在文本框中输入时间段，那么我将得到完整的路径，而不是覆盖的路径，直到在文本框中输入特定的时间段值。我已经使用这些链接制作了代码-：和下面是我的代码。请告诉我哪里出了问题。提前多谢！我不确定drawline（）中的“timetill”值可能没有定义 <!DOCTYPE html> <html> <head> <tit

我正在尝试使用.csv中的数据制作一个动画谷歌地图。路径应随时间的增加而移动。此外，我应该找到路径，直到在文本框中输入的时间段。因此，如果我在文本框中输入时间段，那么我将得到完整的路径，而不是覆盖的路径，直到在文本框中输入特定的时间段值。我已经使用这些链接制作了代码-：和

下面是我的代码。请告诉我哪里出了问题。提前多谢！我不确定drawline（）中的“timetill”值可能没有定义

<!DOCTYPE html>
<html>
<head>
<title>Animated path via a csv file</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map, #wrapper {
  height: 100%;
  margin: 0px;
  padding: 0px;
  position: relative;
}

#over_map {
position: absolute;
top: 10px;
left: 40%;
z-index: 99;
}


</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script>
    var allCoords = [];
    var map, route, marker;

    function getCoords() {
        $.ajax({
            url: 'subject1.csv',
            dataType: 'text',
            success: function(data) {
                var lines = data.split(/[\r\n]+/);

                lines.forEach(function(line){
                    allCoords.push(line.split(','));
                });
                var bounds = new google.maps.LatLngBounds();
                allCoords.forEach(function(coords){
                bounds.extend(new google.maps.LatLng(coords[0], coords[1]));
                });

                map.fitBounds(bounds);

                drawLine();
            }
        });
    }

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

        marker = new google.maps.Marker({
            map: map,
            icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
        });

        for (var i = 0; i < allCoords.length; i++) {
            if(timetill!=undefined && timetill!="" && 
    timetill<allCoords[i].time){
            break;
            }
            window.setTimeout(updatePath, 50 * i, allCoords[i]);
        }
    }
    function updatePath(coords) {
        console.log(coords);
        var latLng = new google.maps.LatLng(coords[0], coords[1]);
        route.getPath().push(latLng);
        marker.setPosition(latLng);
    }

    function initialize() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: {lat: 30.6010548, lng: -96.3534677},
          zoom: 24,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

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

    function plotTill(value){
        console.log(value)
    route.setMap(null)
    marker.setMap(null);
    drawLine(value)
    }


    </script>

    </head>
    <body>

    <div id="wrapper">
    <div id="map"></div>

    <div id="over_map">
    <input type="text" placeholder="Enter second ex: 2" id="search_box" 
    onchange="plotTill(this.value)" />
    </div>
    </div>

    </body>
    </html>

好的，这里有一个有效的例子，我认为它基本上满足了你的需求。我已将每次更新行之间的时间缩短为5毫秒

    function getCoords() {
        $.ajax({
            url: 'toyotav2.csv',
            dataType: 'text',
            success: function(data) {
                var lines = data.split(/[\r\n]+/);

                lines.forEach(function(line){
                    allCoords.push(line.split(','));
                });

                setUpLine();
            }
        });
    }

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

        marker = new google.maps.Marker({
            map: map,
            position: {lat: 0, lng: 0},
            visible: false,
            icon: "https://maps.google.com/mapfiles/ms/micons/blue.png"
        });
    }

    function drawLine(timetill) {       
        for (var i = 0; i < allCoords.length; i++) {
            if (timetill < allCoords[i][2]){
                break;
            }
            window.setTimeout(updatePath, 5 * i, allCoords[i]);
        }
    }

    function updatePath(coords) {
        var latLng = new google.maps.LatLng(coords[0], coords[1]);
        route.getPath().push(latLng);
        marker.setPosition(latLng);
    }

    function initialize() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: {lat: 30.6010548, lng: -96.3534677},
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

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

    function plotTill(value) {
        route.setPath([]);
        marker.setVisible(true);
        drawLine(parseInt(value, 10));
    }

。。。因此，要引用时间值，只需指定

allCoords[i][2]

即可获得第三个元素

创建标记时未指定

位置

，这是必需的。我刚刚将其设置为

{0,0}

，但也将其

visible

属性指定为false作为开始，但在开始绘制直线时将其设置为visible

当您从输入字段中读取值时，您将其作为文本值获取。我使用

parseInt（）

来确保它被转换为整数。否则，您将面临使用“16”这样的值进行比较的风险，例如

timetill 2

。使用parseInt确保您得到的是数字，而不是字符串

只需清除路径，而不是将标记和多段线的贴图设置为null

我还拆分了drawLine函数，因此您可以在ajax响应之后直接创建标记和多段线，但仅在响应用户输入时才开始绘制该线。

@krishnar能否请您研究一下并让我知道。查看我的solution@krishnar非常感谢您的帮助，您的解决方案非常有效！还有，我有两个疑问-：（a）你能告诉我我的代码中到底缺少了什么吗？这是《时代》的专栏吗？（b）为什么此代码或带有硬编码值的代码不在MAMP或XAMP上运行（一旦我们给出localhost:8888//foldername/filename.html）？@krishnar当我在MAMP或XAMP上运行相同的代码时，我得到“无法读取route.getPath（）.push（latlng）”的未定义属性“push”。但当我直接从系统中的文件夹运行时，它工作得很好。@krishnar，你能看看这个吗。我卡住了！我想你可能会帮忙。

    function getCoords() {
        $.ajax({
            url: 'toyotav2.csv',
            dataType: 'text',
            success: function(data) {
                var lines = data.split(/[\r\n]+/);

                lines.forEach(function(line){
                    allCoords.push(line.split(','));
                });

                setUpLine();
            }
        });
    }

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

        marker = new google.maps.Marker({
            map: map,
            position: {lat: 0, lng: 0},
            visible: false,
            icon: "https://maps.google.com/mapfiles/ms/micons/blue.png"
        });
    }

    function drawLine(timetill) {       
        for (var i = 0; i < allCoords.length; i++) {
            if (timetill < allCoords[i][2]){
                break;
            }
            window.setTimeout(updatePath, 5 * i, allCoords[i]);
        }
    }

    function updatePath(coords) {
        var latLng = new google.maps.LatLng(coords[0], coords[1]);
        route.getPath().push(latLng);
        marker.setPosition(latLng);
    }

    function initialize() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: {lat: 30.6010548, lng: -96.3534677},
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

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

    function plotTill(value) {
        route.setPath([]);
        marker.setVisible(true);
        drawLine(parseInt(value, 10));
    }

[
    [30.6011525,-96.3546702,1],
    [30.6011525,-96.3546703,2],
]