-1
.csvのデータを使用してアニメーションのGoogleマップを作成しようとしています。パスは時間の経過とともに移動する必要があります。また、テキストボックスに入力された時間までのパスを見つける必要があります。だから私の現在のコードでは、テキストボックスに期間を入力するので、テキストボックスに入力された特定の期間値までのパスではなく、フルパスを取得します。私はこれらのリンクを使ってコードを作った：https://github.com/duncancumming/maps/blob/master/animatedPaths/animated%20csv.htmlとAnimation of Google Maps Polyline with respect to time increase。.csvを使用して時間に関してアニメーション化されたGoogleマップを生成できません。
以下は私のコードです。 Plsはどこに間違っているのか教えてくれます。ありがとう、事前にたくさん！おそらくdrawline（）の "timetill"の値は未定義になっていますが、わかりません。
<!DOCTYPE html>
<html>
<head>
<title>Animated path via a csv file</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map, #wrapper {
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
}
#over_map {
position: absolute;
top: 10px;
left: 40%;
z-index: 99;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script>
var allCoords = [];
var map, route, marker;
function getCoords() {
$.ajax({
url: 'subject1.csv',
dataType: 'text',
success: function(data) {
var lines = data.split(/[\r\n]+/);
lines.forEach(function(line){
allCoords.push(line.split(','));
});
var bounds = new google.maps.LatLngBounds();
allCoords.forEach(function(coords){
bounds.extend(new google.maps.LatLng(coords[0], coords[1]));
});
map.fitBounds(bounds);
drawLine();
}
});
}
function drawLine(timetill) {
console.log(timetill)
route = new google.maps.Polyline({
path: [],
geodesic : true,
strokeColor: '#FF0000',
strokeOpacity: 0.7,
strokeWeight: 2,
editable: false,
map:map
});
marker = new google.maps.Marker({
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
});
for (var i = 0; i < allCoords.length; i++) {
if(timetill!=undefined && timetill!="" &&
timetill<allCoords[i].time){
break;
}
window.setTimeout(updatePath, 50 * i, allCoords[i]);
}
}
function updatePath(coords) {
console.log(coords);
var latLng = new google.maps.LatLng(coords[0], coords[1]);
route.getPath().push(latLng);
marker.setPosition(latLng);
}
function initialize() {
map = new google.maps.Map(document.getElementById("map"), {
center: {lat: 30.6010548, lng: -96.3534677},
zoom: 24,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
getCoords();
}
google.maps.event.addDomListener(window, 'load', initialize);
function plotTill(value){
console.log(value)
route.setMap(null)
marker.setMap(null);
drawLine(value)
}
</script>
</head>
<body>
<div id="wrapper">
<div id="map"></div>
<div id="over_map">
<input type="text" placeholder="Enter second ex: 2" id="search_box"
onchange="plotTill(this.value)" />
</div>
</div>
</body>
</html>
マイ.csvファイルは、ローカルマシンに保存されており、これが私の.csvファイルのlooks-がどのようである：3列目は時間のためです。
30.6011525,-96.3546702,1
30.6011525,-96.3546703,2
30.6011525,-96.3546703,3
30.6011525,-96.3546703,4
30.6011525,-96.3546703,5
30.6011525,-96.3546703,6
30.6011525,-96.3546703,7
30.6011525,-96.3546703,8
30.6011525,-96.3546703,9
30.6011525,-96.3546703,10
30.6011525,-96.3546703,11
@krishnarあなたはこれを見て、私に知らせてください。 –
私の解決策を見てください – krishnar
@krishnarあなたの助けをありがとう、あなたのソリューションは素晴らしい作品！また、私は2つの疑問を持っています：（a）コードから何が欠けているか教えてください。それは時間のコラムですか？ （b）なぜ、このコードまたはハードコードされた値を持つものがMAMPまたはXAMPで実行されないのですか？（一度localhost：8888 // foldername/filename.htmlを指定すると） –