Question

我正在尝试使用javascript和jsp查看谷歌地图上的路径。所以，基本上我的代码工作如下：坐标在文本文件中，内容保存在数组中，并通过jsp传递给javascript。我只想制作一个这样的动画，以便我可以看到折线是如何更新的。当我在for循环中使用函数setTiemout（）时，我只看到没有任何路径的地图。在任何情况下，我都试图将最终路径可视化，并且工作正常。问题在于我应该在for循环中使用setTimeout（）函数。有没有经验丰富的javascript给出一个提示？提前谢谢！

这是我的代码：

<%@page import="java.util.ArrayList"%>
<%@page import="java.io.InputStreamReader"%>
<%@page import="java.io.DataInputStream"%>
<%@page import="java.io.FileInputStream"%>
<%@page import="java.io.FileReader"%>
<%@page import="java.io.BufferedReader"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%
    String nextX, nextY;
    String [] x = null;
    String [] y = null;
    ArrayList<String> x_list = new ArrayList<String>();
    ArrayList<String> y_list = new ArrayList<String>();
    FileInputStream x_stream = new FileInputStream("T:\\Java_projects\\GPS_Tracking\\src\\x.txt"); 
    FileInputStream y_stream = new FileInputStream("T:\\Java_projects\\GPS_Tracking\\src\\y.txt"); 
    DataInputStream x_input = new DataInputStream(x_stream);
    DataInputStream y_input = new DataInputStream(y_stream);
    BufferedReader x_buffer = new BufferedReader(new InputStreamReader(
    x_input));
    BufferedReader y_buffer = new BufferedReader(new InputStreamReader(
    y_input));

    while ((nextX = x_buffer.readLine()) != null) {
        nextX.trim();
        if (nextX.length() != 0) {
    x_list.add(nextX);
        }
    }
    while ((nextY = y_buffer.readLine()) != null) {
        nextY.trim();
        if (nextY.length() != 0) {
    y_list.add(nextY);
        }
    }
    x = (String[])x_list.toArray(new String[x_list.size()]);
    y = (String[])y_list.toArray(new String[y_list.size()]);

     Double [] gps_x = new Double[x.length];
     Double [] gps_y = new Double[y.length];

    for(int i = 0; i < x.length; i++){
    gps_x[i] = Double.parseDouble(x[i]);
    gps_y[i] = Double.parseDouble(y[i]);    
    }
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html,body,#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
</style>
<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// This example creates a 2-pixel-wide red polyline showing
// the path of William Kingsford Smith's first trans-Pacific flight between
// Oakland, CA, and Brisbane, Australia.

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng("<%=gps_y[0]%>","<%=gps_x[0]%>"),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var path_start = new Array();
  var path_end = new Array();

  <%for(int i = 0; i < gps_x.length;i++){%>
 <%if(i <= gps_x.length-2){%>
  path_start.push(new google.maps.LatLng("<%=gps_y[i]%>","<%=gps_x[i]%>"));
  path_end.push(new google.maps.LatLng("<%=gps_y[i+1]%>","<%=gps_x[i+1]%>"));
<%}else{
      break;
  }%>

<%}%>
    for ( var i = 0; i < path_start.length; i++) {
            var carpath = new google.maps.Polyline({
                path : [ path_start[i], path_end[i] ],
                geodesic : true,
                strokeColor : '#FF0000',
                strokeOpacity : 1.0,
                strokeWeight : 2,
            });
             setTimeout(function() { carpath.setMap(map); }, 100);

        }

    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

Answer 1

我至少可以看到一个问题（如果没有指向地图的链接，我无法验证这是否是唯一的问题。）

您正在同时添加路径上的所有点。这是修改后的循环代码：

var carPolyline = new google.maps.Polyline({
    map: map,
    geodesic : true,
    strokeColor : '#FF0000',
    strokeOpacity : 1.0,
    strokeWeight : 2
});
var carPath = new google.maps.MVCArray();
for ( var i = 0; i < path_start.length; i++) {
  if(i === 0) {
    carPath.push(path_start[i]);
    carPolyline.setPath(carPath);
  } else {
    setTimeout((function(latLng) {
      return function() {
        carPath.push(latLng);
      };
    })(path_start[i]), 100 * i);
  }
}

我不认为你需要你的path_end数组。然而，我可能已经错过了这一点。

这是编辑过的（和工作的）jsfiddle：http://jsfiddle.net/Jm3kL/4/

使用setTimeout（）函数设置google地图折线的动画

1 个答案: