随机化每个路线的谷歌地图折线颜色

时间:2018-05-18 09:44:17

标签: javascript c# angularjs sql-server google-maps

在这里,我们尝试通过颜色区分来自单一来源的折线。提供给折线的数据包含lat,lng和另一个属性。其他道具。将有多个latlng记录。

// Here we created a map object.
var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(20.59, 78.96),
    mapTypeId: google.maps.MapTypeId.TERRAINr
};
// Here we get the map id of the html page.
$scope.map = new google.maps.Map(document.getElementById('map'), 
mapOptions);   
// Here we assign data for the polyline path prop.
var tripdata=[];
tripdata=[
id:1, {lat:23.333, lng:87.777},
id:2, {lat:24.343, lng:78.876}
];
var vehiclePath; // Here we declare a variable of polyline object.
vehiclePath = new google.maps.Polyline({
                 path: tripdata,
                 geodesic: true,
                 strokeColor: '#0000FF',
                 strokeOpacity: 1.0,
                 strokeWeight: 2,                    
                 map: $scope.map                  
             });

1 个答案:

答案 0 :(得分:0)

你可以这样做:

// Here we created a map object.
var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(20.59, 78.96),
    mapTypeId: google.maps.MapTypeId.TERRAINr
};
// Here we get the map id of the html page.
$scope.map = new google.maps.Map(document.getElementById('map'), 
mapOptions);   
// Here we assign data for the polyline path prop.
var tripdata=[];
tripdata=[
id:1, {lat:23.333, lng:87.777},
id:2, {lat:24.343, lng:78.876}
];
var vehiclePath; // Here we declare a variable of polyline object.
vehiclePath = new google.maps.Polyline({
                 path: tripdata,
                 geodesic: true,
                 strokeColor: getRandomColor(),
                 strokeOpacity: 1.0,
                 strokeWeight: 2,                    
                 map: $scope.map                  
             });

var colors = []; // empty array to ensure colours are unique
function getRandomColor(var id) {
  var color;
  do
    var letters = '0123456789ABCDEF';
    color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
  while(!colors.includes(color));
  colors.push(color);
  return color;
  }

如果有帮助,请告诉我

Random color generator