0

javascript と jsp を使用して Google マップでパスを表示しようとしています。したがって、基本的に私のコードは次のように機能します。座標はテキスト ファイルにあり、コンテンツは配列に保存され、jsp を介して JavaScript に渡されます。これのアニメーションを作成して、ポリラインがどのように更新されているかを確認したいだけです。関数 setTiemout() を for ループで使用すると、パスのないマップが表示されます。いずれにせよ、最終的なパスを視覚化しようとしましたが、うまくいきました。問題は、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>
4

1 に答える 1