Google map, polyline draws "extra" line - 看不出是怎么回事

Question

我从数据库中查询了 2 "sets" 个坐标，显示了我们放气球的轨迹。我在起飞和降落期间放置标记。现在我想在 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

Answer 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

Google map, polyline draws "extra" line - 看不出是怎么回事

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

javascript

php

google-maps

google-polyline