Unexplained extra Polyline drawn - Google Maps API v3

问题

I have a strange scenario with regards to a Polyline that is being drawn on the map. Before I post the code, I'll first demonstrate what happens when I make use of the normal direction services (Both calculates the resulting disctance the same = Total Distance: 62.734 km):

Now, when I draw the directions myself - this straight line appears out of nowhere:

Code snippet:

<script type="text/javascript">
    var markers = [
            {
                "lat": '-26.2036247253418',
                "lng": '28.0086193084717'
            }
        ,
            {
                "lat": '-26.1259479522705',
                "lng": '27.9742794036865'
            }
        ,
            {
                "lat": '-25.8434619903564',
                "lng": '28.2100086212158'
            }
    ];
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var labelIndex = 0;
        var totalDistance = 0;

        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var infoWindow = new google.maps.InfoWindow();
        var lat_lng = new Array();
        var latlngbounds = new google.maps.LatLngBounds();
        //var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,
                label: labels[labelIndex++ % labels.length],
                //icon: image
            });
            latlngbounds.extend(marker.position);
            (function (marker, data) {
                // google.maps.event.addListener(marker, "click", function (e) {
                //     infoWindow.setContent(data.description);
                //     infoWindow.open(map, marker);
                // });
            })(marker, data);
        }
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);

        //***********ROUTING****************//

        //Initialize the Path Array
        var path = new google.maps.MVCArray();

        //Initialize the Direction Service
        var service = new google.maps.DirectionsService();

        var directionsDisplay = new google.maps.DirectionsRenderer({
          setMap: map
        });

        //Set the Path Stroke Color
        var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

        //Loop and Draw Path Route between the Points on MAP
        for (var i = 0; i < lat_lng.length; i++) {
            if ((i + 1) < lat_lng.length) {
                var src = lat_lng[i];
                var des = lat_lng[i + 1];
                path.push(src);
                //poly.strokeColor = '#'+Math.floor(Math.random()*16777215).toString(16);
                poly.setPath(path);
                service.route({
                    origin: src,
                    destination: des,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                }, function (result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(result);
                        var myroute = directionsDisplay.directions.routes[0];
                        var distance = 0;

                        for (i = 0; i < myroute.legs.length; i++) {
                            distance += myroute.legs[i].distance.value;
                            //for each 'leg'(route between two waypoints) we get the distance and add it to the total
                        }

                        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {                            
                            path.push(result.routes[0].overview_path[i]);
                            //console.log(result.routes[0].legs[0].distance);
                        }                        
                        totalDistance += distance;
                        document.getElementById('total').innerHTML = (totalDistance / 1000) + ' km';
                    }                    
                });
            }
        }        
    }
</script>
<div id="dvMap"></div>
<div><p>Total Distance: <span id="total"></span></p></div>

回答1:

Ok, so to solve the problem. Just remove the following line:

Reference: Google Documentation - Simple Polylines

And like that, the line is gone:

回答2:

Aren't you also drawing a line between the first and last poly? You should only draw lines between poly0 and poly1, poly1 and poly2 etc. but not poly100 and poly0 (if poly100 is the last one)

That would explain the straight line going from point B to A completing the shape. you don't want to complete the shape, so stop drawing. is there no function you can set to not complete the shape?

I only know of a very expensive work around and that is to trace back in reverse order from B to A along the same route. But that is probably not what you are looking for

来源：https://stackoverflow.com/questions/38953952/unexplained-extra-polyline-drawn-google-maps-api-v3