Drawing multiple polyline with different color using Google map api V3 ASP.net

前端 未结 3 1937
后悔当初
后悔当初 2020-12-09 12:40

I am able to draw multiple polyline in google map and style them, but I want to color each polyline with a different color.

Currently, I have this code:



        
相关标签:
3条回答
  • 2020-12-09 12:43

    For drawing 2 different Polylines

        function initialize()
        {
    
                    map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 7,
                        center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
                      });
    
                    var polyOptions = {
                        strokeColor: '#000000',
                        strokeOpacity: 1.0,
                        strokeWeight: 3
                    };
                    var polyOptions2 = {
                        strokeColor: '#FFFFFF',
                        strokeOpacity: 1.0,
                        strokeWeight: 3
                    };
    
                    var polyline = new google.maps.Polyline(polyOptions);
                    var polyline2= new google.maps.Polyline(polyOptions2);
                    polyline.setMap(map);
                    polyline2.setMap(map);
                    google.maps.event.addListener(map, 'click', addLatLng);
        }
    
    0 讨论(0)
  • 2020-12-09 12:51

    Certainly. For instance suppose you know what colours you want to go with each line, let's assume you therefore have an array of colours which has a length equal to DrivePath.length - 1.

    var Colors = [
        "#FF0000", 
        "#00FF00", 
        "#0000FF", 
        "#FFFFFF", 
        "#000000", 
        "#FFFF00", 
        "#00FFFF", 
        "#FF00FF"
    ];
    

    Now, instead of drawing one polyline, draw a separate polyline for each coordinate.

    for (var i = 0; i < DrivePath.length-1; i++) {
      var PathStyle = new google.maps.Polyline({
        path: [DrivePath[i], DrivePath[i+1]],
        strokeColor: Colors[i],
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });
    }
    
    0 讨论(0)
  • 2020-12-09 13:08

    The above answers are correct. This would results in separated polylines. This could be improved by adding round start caps and round end caps of each polylines.

    polyline.setEndCap(new RoundCap());
    polyline2.setStartCap(new RoundCap());
    
    0 讨论(0)
提交回复
热议问题