谷歌地图,折线绘制"extra"Line -can'看不到发生了什么


Google map, polyline draws "extra" line -can't see what's going on

我从数据库中查询了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