绘制了无法解释的额外折线-Google Maps API v3 [英] Unexplained extra Polyline drawn - Google Maps API v3

问题描述

关于在地图上绘制的 Polyline ，我有一个奇怪的情况.在发布代码之前，我将首先演示使用法线方向服务时会发生什么情况(两者都计算出的距离相同= 总距离:62.734公里):

现在，当我自己绘制方向时-这条直线无处不在:

代码段:

 < script type ="text/javascript">var标记= [{"lat":'-26.2036247253418'，"lng":"28.0086193084717"}，{"lat":'-26.1259479522705'，"lng":'27 .9742794036865'}，{"lat":'-25.8434619903564'，"lng":"28.2100086212158"}];window.onload = function(){var mapOptions = {中心:新的google.maps.LatLng(markers [0] .lat，markers [0] .lng)，变焦:8mapTypeId: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';对于(i = 0; i< markers.length; i ++){var数据=标记[i]var myLatlng = new google.maps.LatLng(data.lat，data.lng);lat_lng.push(myLatlng);var marker = new google.maps.Marker({位置:myLatlng，地图:标题:data.title，标签:labels [labelIndex ++％labels.length]，//icon:图片});latlngbounds.extend(marker.position);(功能(标记，数据){//google.maps.event.addListener(marker，"click"，function(e){//infoWindow.setContent(data.description);//infoWindow.open(map，marker);//});})(标记，数据)；}map.setCenter(latlngbounds.getCenter());map.fitBounds(latlngbounds);//***********路由****************////初始化路径数组var path = new google.maps.MVCArray();//初始化指导服务var service = new google.maps.DirectionsService();var DirectionsDisplay = new google.maps.DirectionsRenderer({setMap:地图});//设置路径笔触颜色var poly = new google.maps.Polyline({map:map，strokeColor:'#4986E7'});//在MAP上的点之间循环绘制路径for(var i = 0; i< lat_lng.length; i ++){如果((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({来源:src，目的地:des，travelMode:google.maps.DirectionsTravelMode.DRIVING}，函数(结果，状态){如果(状态== google.maps.DirectionsStatus.OK){directionsDisplay.setDirections(result);var myroute = directionsDisplay.directions.routes [0];var distance = 0;对于(i = 0; i< myroute.legs.length; i ++){距离+ = myroute.legs [i] .distance.value;//对于每个腿"(两个航点之间的路线)，我们获取距离并将其添加到总计中}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 + =距离；document.getElementById('total').innerHTML =(totalDistance/1000)+'km';}});}}}</script>< div id ="dvMap"></div>< div< p>总距离:< span id ="total"</span</p</div 

解决方案

好的，因此可以解决该问题.只需删除以下行:

参考:

那样，行就消失了:

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>

解决方案

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

Reference: Google Documentation - Simple Polylines

And like that, the line is gone:

这篇关于绘制了无法解释的额外折线-Google Maps API v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！