我从数据库中查询了2组坐标,显示了我们放飞气球的轨迹。我在起飞和降落时做标记。现在我想在两条轨道上的起飞和降落之间画一条折线,但由于某种原因,两个着陆点也与折线相连。例如:http://minballontur.dk/all/showtracknew.php
我不知道发生了什么-我试着把坐标数组的长度写为0,在每个循环中,但它没有帮助。
function load() {
var lastlat;
var lastlng;
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.44, 11.80),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var flightPlanCoordinates = [];
<?php while($row = mysql_fetch_array($result)) { ?>
// Change this depending on the name of your PHP file
flightPlanCoordinates.length = 0;
downloadUrl("phpsqlajax_genxmlall.php?LogDate=<?php echo $row['Log_Date'] ?>&TimeOfDay=<?php echo $row['TimeOfDay'] ?>&Log_Name=<?php echo $row['Log_Name'] ?>", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
flightPlanCoordinates[i] = new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng"));
}
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2
});
flightPath.setMap(map);
//Show first marker
var name = markers[0].getAttribute("name");
var address = markers[0].getAttribute("address");
var type = markers[0].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[0].getAttribute("lat");
lastlng = markers[0].getAttribute("lng");
//Show last marker
var point1 = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var point2 = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var distance = getDistance(point1, point2);
var distancekm = Math.round((distance/1000)*10)/10;
var name = markers[markers.length-1].getAttribute("name");
var address = markers[markers.length-1].getAttribute("address");
var type = markers[markers.length-1].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/>Distance : "+ distancekm +" km<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[markers.length-1].getAttribute("lat");
lastlng = markers[markers.length-1].getAttribute("lng");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng")));
}
map.fitBounds(bounds);
}); //Downlaod URL
<?php } ?> //End DB Loop
} // Load
在两个异步回调函数中使用相同的坐标数组。它在回调函数之外被重置为0长度,在它们中的任何一个运行之前,所以你最终得到了第二个折线中两个折线的所有坐标。
应该这样做:
function load() {
var lastlat;
var lastlng;
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.44, 11.80),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
<?php while($row = mysql_fetch_array($result)) { ?>
downloadUrl("phpsqlajax_genxmlall.php?LogDate=<?php echo $row['Log_Date'] ?>&TimeOfDay=<?php echo $row['TimeOfDay'] ?>&Log_Name=<?php echo $row['Log_Name'] ?>", function(data) {
// declare a new array of coordinates in each callback function.
var flightPlanCoordinates = [];
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
flightPlanCoordinates[i] = new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng"));
}
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2
});
flightPath.setMap(map);
//Show first marker
var name = markers[0].getAttribute("name");
var address = markers[0].getAttribute("address");
var type = markers[0].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[0].getAttribute("lat");
lastlng = markers[0].getAttribute("lng");
//Show last marker
var point1 = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var point2 = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var distance = getDistance(point1, point2);
var distancekm = Math.round((distance/1000)*10)/10;
var name = markers[markers.length-1].getAttribute("name");
var address = markers[markers.length-1].getAttribute("address");
var type = markers[markers.length-1].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/>Distance : "+ distancekm +" km<br/> Status : "+type;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
lastlat = markers[markers.length-1].getAttribute("lat");
lastlng = markers[markers.length-1].getAttribute("lng");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng")));
}
map.fitBounds(bounds);
}); //Download URL
<?php } ?> //End DB Loop
} // Load