Question

我正在尝试使用.csv中的数据制作动画谷歌地图。路径应该随着时间的推移而移动。此外，我应该找到路径，直到在文本框中输入的时间段。因此，如果我在文本框中输入时间段，那么使用当前代码，以便获得完整路径，而不是在文本框中输入特定时间段值之前所覆盖的路径。我使用以下链接制作了代码：https://github.com/duncancumming/maps/blob/master/animatedPaths/animated%20csv.html和Animation of Google Maps Polyline with respect to time increase。

以下是我的代码。请告诉我出错的地方。非常感谢提前！可能是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>

我的.csv文件存储在本地计算机上，这就是我的.csv文件的外观 - 第三列是时间。

30.6011525,-96.3546702,1
30.6011525,-96.3546703,2
30.6011525,-96.3546703,3
30.6011525,-96.3546703,4
30.6011525,-96.3546703,5
30.6011525,-96.3546703,6
30.6011525,-96.3546703,7
30.6011525,-96.3546703,8
30.6011525,-96.3546703,9
30.6011525,-96.3546703,10
30.6011525,-96.3546703,11

Answer 1

好的，这是一个可行的例子，我认为这主要是你想要的。我将每次更新行之间的时间缩短为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].time，但在2D坐标time数组上创建了名为allCoords的属性。你得到的是一个看起来像的数组：

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

...所以要引用时间值，你只需要指定allCoords[i][2]来获得第3个元素。

创建标记时未指定position，这是必需的。我只是将其设置为{0,0}，但也将其visible属性指定为false，但在开始绘制线条时将其设置为可见。

当您从输入字段中读取值时，您将其作为文本值获取。我使用parseInt()来确保它被转换为整数。否则，您可能会冒“{16”这样的值用于timetill<allCoords[i].time等比较的风险。所以"16" < 2而16 > 2。使用parseInt确保你有一个数字，而不是一个字符串。

不要将标记和折线的地图设置为null，只需清除路径即可。

我还拆分了drawLine函数，所以你在ajax响应之后直接创建了标记和折线，但只是开始绘制线以响应用户输入。

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

1 个答案: