Question

我正面临谷歌地图的问题，问题是，当我在标记之间绘制路径时，它重复了图像： enter image description here

继续制造商：

 var markers=[{"longitude":"-5.808954951287861","latitude":"35.77107409886168","deviceTime":"2017-03-29T14:02:36.000+0000"},
        {"longitude":"-5.807401662705262","latitude":"35.77029143851354","deviceTime":"2017-03-29T14:05:36.000+0000"},
        {"longitude":"-5.794769662196012","latitude":"35.77169804990058","deviceTime":"2017-03-29T14:08:36.000+0000"},
        {"longitude":"-5.784207185242776","latitude":"35.76541442176138","deviceTime":"2017-03-29T14:11:36.000+0000"},
        {"longitude":"-5.78417853735302","latitude":"35.76539666006973","deviceTime":"2017-03-29T14:14:36.000+0000"},
        {"longitude":"-5.784050767764706","latitude":"35.76528034963732","deviceTime":"2017-03-29T14:15:52.000+0000"}];

继承人的职能：

 storyboard.drawTrajet=function(markers){



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

             var mapOptions = {
                    center: new google.maps.LatLng(markers[0].latitude, markers[0].longitude),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map"), mapOptions);
                var infoWindow = new google.maps.InfoWindow();
                var lat_lng = new Array();
                var latlngbounds = new google.maps.LatLngBounds();

                for (i = 0; i < markers.length; i++) {
                    var data = markers[i];

                    alert(markers.length);

                    var myLatlng = new google.maps.LatLng(data.latitude, data.longitude);
                    lat_lng.push(myLatlng);

                    var marker = new google.maps.Marker({

                        //icon: icons['info'].icon,
                        label: labels[labelIndex++ % labels.length],

                        position: myLatlng,
                        map: map
                        //title: 'data.title'
                    });
                    //path[z].push(marker.getPosition());
                    latlngbounds.extend(marker.position);
                    (function (marker, data) {
                        google.maps.event.addListener(marker, "mouseover", function (e) {

                             storyboard.geocodeLatLng($scope.geocoder , map, $scope.infoWindow,data.latitude,data.longitude, false,false);
                             //alert( $scope.MyPos);
                            infoWindow.setContent('<div ><i class="fa fa-calendar" aria-hidden="true"></i> '+$filter('date')(data.deviceTime, "HH:mm:ss")
                                +'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+'<i class="glyphicon glyphicon-bookmark" aria-hidden="true"></i>'+$scope.MyPos
                                +'<div>'
                                +'<i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>'+data.latitude+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
                                +'<i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>'+data.longitude
                                +'</div>'
                                +'</div>');
                            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();

                //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++) {
                    //alert("sss");
                    if ((i + 1) < lat_lng.length) {
                        var src = lat_lng[i];
                        //src.setMap(null);
                        var des = lat_lng[i + 1];
                        path.push(src);
                        poly.setPath(path);
                        service.route({
                            origin: src,
                            destination: des,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                        }, function (result, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                   // alert("sssscvvvvvvs");
                                    path.push(result.routes[0].overview_path[i]);
                                }
                            }
                        });
                    }
                }


        }

任何人都可以帮忙解决这个问题吗？

Answer 1

我认为你应该在这种情况下使用 Waypoints 。请看这个例子。

https://developers.google.com/maps/documentation/javascript/directions#Waypoints

如何在标记之间绘制路径

1 个答案: