javascript — карта Google, полилинии рисует & quot; дополнительные & quot; линия-не вижу, что происходит

Я запрашиваю 2 «набора» координат из базы данных, показывая трек, по которому мы полетели на воздушном шаре.
Я размещаю маркеры во время взлета и посадки.
Теперь я хочу нарисовать ломаную линию между взлетом и посадкой на 2 дорожках, но по какой-то причине также 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

-1

Решение

Вы используете один и тот же массив координат в обеих функциях асинхронного обратного вызова. Он сбрасывается до 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
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]