Fatal编程技术网
  • javascript/
  • Javascript 使用setTimeout（）函数设置google maps多段线动画

Javascript 使用setTimeout（）函数设置google maps多段线动画

javascript jsp google-maps-api-3

Javascript 使用setTimeout（）函数设置google maps多段线动画,javascript,jsp,google-maps-api-3,Javascript,Jsp,Google Maps Api 3,我正在尝试使用javascript和jsp在google地图上查看路径。因此，我的代码基本上是这样工作的：坐标在文本文件中，内容保存在数组中，并通过jsp传递给javascript。我只想制作一个动画，这样我就可以看到多段线是如何更新的。当我在for循环中使用函数setTiemout（）时，我只看到没有任何路径的映射。在任何情况下，我只是试图想象最终的路径，它工作得很好。问题在于我应该在for循环中使用setTimeout（）函数。有javascript经验的人能给出一个提示吗？提前谢谢 这是我

我正在尝试使用javascript和jsp在google地图上查看路径。因此，我的代码基本上是这样工作的：坐标在文本文件中，内容保存在数组中，并通过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>


简单多段线
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
//此示例创建一条2像素宽的红色多段线，显示
//威廉·金斯福德·史密斯的第一次跨太平洋飞行路线
//加利福尼亚州奥克兰和澳大利亚布里斯班。
函数初始化（）{
变量映射选项={
缩放：14，
中心：新的google.maps.LatLng（“，”），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var path_start=新数组（）；
var path_end=新数组（）；

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

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


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);
  }
}



var carPolyline=new google.maps.Polyline({
地图：地图，
测地线：正确，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});
var carPath=new google.maps.MVCArray（）；
对于（变量i=0；i

在我看来，不需要你的path_end数组。不过，我可能没有抓住要点


以下是已编辑的（和正在工作的）JSFIDLE:
谢谢你的回复！我尝试了代码，但输出的只是没有任何多段线的地图。你需要哪一个链接？我需要路径结束数组，因为我认为我必须在每个循环中给出起点和终点坐标。我需要一个到你地图网站的链接。你得到了点，但无法看到我一直使用的地图猜测。我不知道是否有任何脚本错误，不管lat、lng值是否正确，还是一长串的其他可能性。我可以添加一些坐标，这样你就可以用它们运行代码。这会有帮助吗？使用类似于
carPolyline.setOptions（{strokeColor:'#00FF00'）的东西
。但是如果您对此有进一步的问题，您需要发布一个新问题。