用setTimeout（）函數動畫Google地圖多段線

我想查看使用JavaScript和jsp的谷歌地圖上的路徑。所以，基本上我的代碼的工作原理如下：座標位於文本文件中，內容保存在數組中，並通過jsp傳遞給javascript。我只想製作一個這樣的動畫，這樣我就可以看到折線是如何更新的。當我在for循環中使用函數setTiemout（）時，我只看到沒有任何路徑的地圖。無論如何，我只是試圖想象最終的路徑，它工作正常。問題在於我應該在for循環中使用setTimeout（）函數。任何人都可以在JavaScript中體驗一下提示嗎？提前致謝！用setTimeout（）函數動畫Google地圖多段線

這裏是我的代碼：

<%@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>

來源

2013-11-09 ArmMiner

我至少可以看到一個問題（我無法驗證，如果這是沒有鏈接到地圖的唯一問題）。

您正在同時添加路徑上的所有點。這裏是你的循環修改後的代碼：

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/

來源

2013-11-11 00:02:34

感謝您的答覆！我嘗試了代碼，但輸出只是沒有任何折線的地圖。你需要哪個鏈接？我需要path_end數組，因爲我認爲我必須在每個循環中給出起點和終點座標。 – ArmMiner

我需要一個鏈接到您的地圖網站。 –

它在本地主機上運行！或者我沒有明白你的觀點？ – ArmMiner

用setTimeout（）函數動畫Google地圖多段線

回答

相關問題