Changing color for the Multiple Polyline stroke on

2019-02-20 02:43发布

站内文章 / JavaScript

13 0

在下西门庆

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I using the same code from http://www.aspsnippets.com/Articles/Google-Maps-V3-Draw-route-line-between-two-geographic-locations-Coordinates-Latitude-and-Longitude-points.aspx here i can have n number of point I am trying to change the color of stroke it is not reflecting

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var markers = [
            {
                "title": 'Alibaug',
                "lat": '18.641400',
                "lng": '72.872200',
                "description": 'xxxx'
            }
        ,
            {
                "title": 'Mumbai',
                "lat": '18.964700',
                "lng": '72.825800',
                "description": 'yyyy'
            }
        ,
            {
                "title": 'Pune',
                "lat": '18.523600',
                "lng": '73.847800',
                "description": 'zzz'
            }
];
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            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();
            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
                });
                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****************//

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

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

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



            //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.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++) {
                                path.push(result.routes[0].overview_path[i]);
                            }
                        }
                    });
                }
            }
        }
    </script>
    <div id="dvMap" style="width: 500px; height: 500px">
    </div>
</body>
</html>

and replaced this line with

 var poly = new google.maps.Polyline({ map: map, strokeColor: 'red' });

and i tried to add color using the below code as

var colorVariable = ["white","green","blue","yellow","rose"];



     for(var a =0;a<=5;a++){
            var polyOptions = {
                strokeColor: colorVariable[a],
                strokeOpacity: 1.0,
                strokeWeight: 2
            }
            poly = new google.maps.Polyline({ map: map, strokeColor: polyOptions });
            poly.setMap(map);
        }

but i am not getting the different color strokes please say how to integrated it what is wrong in it

回答1:

I used a trick to find out which request is being processed, by looking at if (result.request.origin == lat_lng[i]) . (There might exist more elegant solutions)

I added a 4th point (just to see 1 more color, see if it works).

Is this what you want?

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Changing color for the Multiple Polyline stroke on Google maps</title>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var polylines = [];  // let's make 1 polyline per color

        var markers = [
            {
                "title": 'Alibaug',
                "lat": 18.641400,
                "lng": 72.872200,
                "description": 'xxxx'
            },
            {
                "title": 'Mumbai',
                "lat": 18.964700,
                "lng": 72.825800,
                "description": 'yyyy'
            },
            {
                "title": 'Pune',
                "lat": 18.523600,
                "lng": 73.847800,
                "description": 'zzz'
            }, 
            {
                "title": 'Kolhapur',
                "lat": 16.696530010128207,
                "lng": 74.23864138126372,
                "description": 'Extra point'
            }
        ];
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            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();

            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
                });
                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****************//
            // Make the polyline
            //Loop and Draw Path Route between the Points on MAP
            for (var i = 0; i< lat_lng.length; i++) {
              generatePath(i);  // I put this all in a function
            }

            // we want to know which request is being processed
            function indexOfRequest(result) {
              for (var i = 0; i <= lat_lng.length; i++) {
                if (result.request.origin == lat_lng[i]) {
                  return i;
                }
              }
            }
            function generatePath(i) {
                // colors
                var colorVariable = ["white", "green", "blue", "yellow", "rose"];
                //Intialize the Direction Service
                var service = new google.maps.DirectionsService();
                //Intialize the Path Array
                var path = new google.maps.MVCArray();
                var color = colorVariable[i % colorVariable.length];  // the % makes sure the array cycles, so after rose, it's white again
                var poly = new google.maps.Polyline({ map: map, strokeColor: color });
                polylines.push(poly);
                var src = lat_lng[i];
                var des = lat_lng[i + 1];
                path.push(src);
                poly.setPath(path);
                // route service
                service.route({
                    origin: src,
                    destination: des,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                }, function (result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        var routeIndex = indexOfRequest(result);
                        polylines[routeIndex].setPath(result.routes[0].overview_path);
                    }
                });

            }
        }
    </script>
    <div id="dvMap" style="width: 500px; height: 500px">
    </div>
</body>
</html>

回答2:

A single polyline can only have one color, you need to make a separate polyline for each color:

function getDirections(src, des, color, map) {
    //Intialize the Direction Service
    var service = new google.maps.DirectionsService();
    service.route({
        origin: src,
        destination: des,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            //Intialize the Path Array
            var path = [];
            for (var i = 0; i < result.routes[0].overview_path.length; i++) {
                path.push(result.routes[0].overview_path[i]);
            }
            //Set the Path Stroke Color
            var polyOptions = {
                strokeColor: color,
                strokeOpacity: 1.0,
                strokeWeight: 2,
                path: path,
                map: map
            }
            poly = new google.maps.Polyline(polyOptions);
            poly.setMap(map);

        }
    });
}

proof of concept fiddle

code snippet:

var markers = [{
  "title": 'Alibaug',
  "lat": '18.641400',
  "lng": '72.872200',
  "description": 'xxxx'
}, {
  "title": 'Mumbai',
  "lat": '18.964700',
  "lng": '72.825800',
  "description": 'yyyy'
}, {
  "title": 'Pune',
  "lat": '18.523600',
  "lng": '73.847800',
  "description": 'zzz'
}];
// white is hard to see on the map tiles, removed.
var colorVariable = ["green", "blue", "yellow", "rose"];
window.onload = function() {
  var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  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();
  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
    });
    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****************//



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

  //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];
      getDirections(src, des, colorVariable[i], map);
    }
  }
}

function getDirections(src, des, color, map) {
  //Intialize the Direction Service
  var service = new google.maps.DirectionsService();
  service.route({
    origin: src,
    destination: des,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      //Intialize the Path Array
      var path = [];
      for (var i = 0; i < result.routes[0].overview_path.length; i++) {
        path.push(result.routes[0].overview_path[i]);
      }
      //Set the Path Stroke Color
      var polyOptions = {
        strokeColor: color,
        strokeOpacity: 1.0,
        strokeWeight: 2,
        path: path,
        map: map
      }
      poly = new google.maps.Polyline(polyOptions);
      poly.setMap(map);

    }
  });
}

html,
body,
#dvMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="dvMap"></div>

回答3:

You can change the stroke color only using setOption, this way :

  poly.setOptions({strokeColor: 'blue'});

Your polyOption is not an legal value for strokeColor attribute.
You can assing whit your code the strokeColor using the obj.setOptions({attribute: value}) pattern