使用 setTimeout(） 函数对谷歌地图折线进行动画处理

Animating google maps polyline with setTimeout() function

本文关键字：折线 动画 处理 谷歌地图 setTimeout 函数 使用      更新时间：2023-09-26

我正在尝试使用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>

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

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

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/

相关文章：