0
在下面的代碼我需要在地圖以顯示聚線在GoogleMap的API問題顯示折線
我有以下代碼下面我所提到的問題.. 這裏使用的GoogleMap我已示出的兩個出租車圖標與正在以3秒的時間間隔在地圖中移動。 我想沿着出租車正在移動的路徑畫一條線.. 幫助。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Taxi Tracker App</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var myCarsLatVal =new Array();
// for car 1..............................................
myCarsLatVal[0]="28.611335";
myCarsLatVal[1]="28.611278";
myCarsLatVal[2]="28.611258";
myCarsLatVal[3]="28.611203";
myCarsLatVal[4]="28.611168";
myCarsLatVal[5]="28.611141";
myCarsLatVal[6]="28.611128";
myCarsLatVal[7]="28.611069";
myCarsLatVal[8]="28.611048";
myCarsLatVal[9]="28.611019";
myCarsLatVal[10]="28.610993";
myCarsLatVal[11]="28.610979";
myCarsLatVal[12]="28.610951";
myCarsLatVal[13]="28.610937";
myCarsLatVal[14]="28.610918";
myCarsLatVal[15]="28.610895";
myCarsLatVal[16]="28.610878";
myCarsLatVal[17]="28.610857";
myCarsLatVal[18]="28.610829";
myCarsLatVal[19]="28.610791";
myCarsLatVal[20]="28.610767";
myCarsLatVal[21]="28.610746";
myCarsLatVal[22]="28.610720";
myCarsLatVal[23]="28.610685";
myCarsLatVal[24]="28.610661";
myCarsLatVal[25]="28.610638";
myCarsLatVal[26]="28.610603";
myCarsLatVal[27]="28.610570";
//myCarsLatVal[40]="28.610603";
var myCarsLangVal = new Array();
myCarsLangVal[0] = "77.234467";
myCarsLangVal[1] = "77.234508";
myCarsLangVal[2] = "77.234515";
myCarsLangVal[3] = "77.234551";
myCarsLangVal[4] = "77.234571";
myCarsLangVal[5] = "77.234589";
myCarsLangVal[6] = "77.234596";
myCarsLangVal[7] = "77.234634";
myCarsLangVal[8] = "77.234636";
myCarsLangVal[9] = "77.234658";
myCarsLangVal[10] = "77.234674";
myCarsLangVal[11] = "77.234698";
myCarsLangVal[12] = "77.234717";
myCarsLangVal[13] = "77.234736";
myCarsLangVal[14] = "77.234762";
myCarsLangVal[15] = "77.234781";
myCarsLangVal[16] = "77.234811";
myCarsLangVal[17] = "77.234843";
myCarsLangVal[18] = "77.234907";
myCarsLangVal[19] = "77.234974";
myCarsLangVal[20] = "77.235015";
myCarsLangVal[21] = "77.235060";
myCarsLangVal[22] = "77.235100";
myCarsLangVal[23] = "77.235157";
myCarsLangVal[24] = "77.235200";
myCarsLangVal[25] = "77.235251";
myCarsLangVal[26] = "77.235310";
myCarsLangVal[27] = "77.235361";
// myCarsLangVal[40] = "77.235310";
// for car 2................................
var myCarsLatValr =new Array();
myCarsLatValr[0]="28.611194";
myCarsLatValr[1]="28.611137";
myCarsLatValr[2]="28.611097";
myCarsLatValr[3]="28.611041";
myCarsLatValr[4]="28.610977";
myCarsLatValr[5]="28.610946";
myCarsLatValr[6]="28.610918";
myCarsLatValr[7]="28.610895";
myCarsLatValr[8]="28.610859";
myCarsLatValr[9]="28.610859";
myCarsLatValr[10]="28.610812";
myCarsLatValr[11]="28.610765";
myCarsLatValr[12]="28.610711";
myCarsLatValr[13]="28.610685";
myCarsLatValr[14]="28.610659";
myCarsLatValr[15]="28.610633";
myCarsLatValr[16]="28.610593";
myCarsLatValr[17]="28.610546";
myCarsLatValr[18]="28.610511";
myCarsLatValr[19]="28.610478";
myCarsLatValr[20]="28.610450";
myCarsLatValr[21]="28.610407";
myCarsLatValr[22]="28.610358";
myCarsLatValr[23]="28.610311";
myCarsLatValr[24]="28.610271";
myCarsLatValr[25]="28.610221";
myCarsLatValr[26]="28.610172";
myCarsLatValr[27]="28.610132";
var myCarsLangValr = new Array();
myCarsLangValr[0] = "77.234416";
myCarsLangValr[1] = "77.234392";
myCarsLangValr[2] = "77.234371";
myCarsLangValr[3] = "77.234347";
myCarsLangValr[4] = "77.234320";
myCarsLangValr[5] = "77.234298";
myCarsLangValr[6] = "77.234274";
myCarsLangValr[7] = "77.234253";
myCarsLangValr[8] = "77.234218";
myCarsLangValr[9] = "77.234218";
myCarsLangValr[10] = "77.234172";
myCarsLangValr[11] = "77.234127";
myCarsLangValr[12] = "77.234084";
myCarsLangValr[13] = "77.234011";
myCarsLangValr[14] = "77.233931";
myCarsLangValr[15] = "77.233842";
myCarsLangValr[16] = "77.233738";
myCarsLangValr[17] = "77.233639";
myCarsLangValr[18] = "77.233572";
myCarsLangValr[19] = "77.233483";
myCarsLangValr[20] = "77.233405";
myCarsLangValr[21] = "77.233327";
myCarsLangValr[22] = "77.233199";
myCarsLangValr[23] = "77.233086";
myCarsLangValr[24] = "77.232987";
myCarsLangValr[25] = "77.232885";
myCarsLangValr[26] = "77.232775";
myCarsLangValr[27] = "77.232681";
var count=-1; var count1=-1;
var markersArray = []; var markersArray1 = [];
for(gg in markersArray)
{
markersArray[gg].setMap(null);
}
markersArray.length = 0;
for(ggg in markersArray1)
{
markersArray1[ggg].setMap(null);
}
markersArray1.length = 0;
function initialize()
{
var poly;
var myLatlng = new google.maps.LatLng(myCarsLatVal[0],myCarsLangVal[0]);
var mapOptions = {
zoom: 20,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// .... set polyline properties...
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
//setInterval(function(){count++; markersArray[count] = new google.maps.Marker({position: new google.maps.LatLng(myCarsLatVal[count],myCarsLangVal[count]),Icon :"<?php echo base_url();?>/images/taxi.png",map : map}); google.maps.event.addListener(markersArray[count], 'click', function() {infowindow.open(map,markersArray[count]);});},2000)
// .......................
setInterval(function(){DisplayTaxiMarker()}, 3000);
function DisplayTaxiMarker()
{
//................car1................
count++;
markersArray[count] =
new google.maps.Marker({position : new google.maps.LatLng(myCarsLatVal[count],myCarsLangVal[count]),
Icon :"<?php echo base_url();?>/images/taxi.png",
map : map});
/*
// poligon get...
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(myCarsLatVal[count],myCarsLangVal[count]);
// Add a new marker at the new plotted point on the polyline.
var markersArray[count] = new google.maps.Marker({
position: (myCarsLatVal[count],myCarsLangVal[count]),
title: '#' + path.getLength(),
map: map
});
*/
if(count >= 1)
{
markersArray[count-1].setMap(null);
}
if(count == 28)
{
count = 0; markersArray[28].setMap(null);
}
google.maps.event.addListener(markersArray[count], 'click', function() {infowindow.open(map,markersArray[count]);});
var infowindow = new google.maps.InfoWindow({
content: 'Vehicle No : DL 1R Y-1295 <br />'+ 'Latitude : ' +myCarsLatVal[count] + '<br /> Longitude : ' +myCarsLangVal[count] +'<br /> Driver Name : Ram Kumar <br /> Hemisphere : NE <br /> Driver Mobile :<a href="tel:+8447264179">call 8447264179</a>'
});
// .......................car2..................
count1++;
markersArray1[count1] =
new google.maps.Marker({position : new google.maps.LatLng(myCarsLatValr[count1],myCarsLangValr[count1]),
Icon :"<?php echo base_url();?>/images/taxi1.png",
map : map});
if(count1 >= 1)
{
markersArray1[count1-1].setMap(null);
}
if(count1 == 28)
{
count1 = 0; markersArray1[28].setMap(null);
}
google.maps.event.addListener(markersArray1[count1], 'click', function() {infowindow1.open(map,markersArray1[count1]);});
var infowindow1 = new google.maps.InfoWindow({
content: 'Vehicle No : DL 9P H-5205 <br />'+ 'Latitude : ' +myCarsLatValr[count1] + '<br /> Longitude : ' +myCarsLangValr[count1] +'<br /> Driver Name : Mahesh Kumar<br /> Hemisphere : SW <br /> Driver Mobile : <a href="tel:+9304466524">call 9304466524 </a>'
});
}
//marker.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>