在地图上绘制具有不同颜色的多条折线

时间:2014-05-12 04:12:02

标签: javascript google-maps-api-3

我有一个JSON数组,有多个纬度和经度路径。它看起来如下:

我的要求是使用不同的颜色在地图上绘制每个旅程,但我的脚本以一种颜色绘制所有旅程:

使用的代码是:

<script>
        function initialize() {
          var jsonValues = '<?php echo $json; ?>';
          var oJsonObj = JSON.parse(jsonValues);

          console.log(oJsonObj);
          var mapOptions = {
                    zoom: 13,
                    center: new google.maps.LatLng(6.932088333333334, 79.84256166666667),
                };
          var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);

          Object.size = function(obj) {
                var size = 0, key;
                for (key in obj) {
                    if (obj.hasOwnProperty(key)) size++;
                }
                return size;
          };

          var numJournies = Object.size(oJsonObj);
          var journey = [];

          $.each(oJsonObj, function(ind,val){

             var r = Math.floor(Math.random() * 255);
             var g = Math.floor(Math.random() * 255);
             var b = Math.floor(Math.random() * 255);
             color= "rgb("+r+" ,"+g+","+ b+")"; 


            var journey = [];
             $.each(val, function(i,v){
                journey.push(new google.maps.LatLng(v.latitude, v.longitude));

             });


             polyline = new google.maps.Polyline({
                    path: journey,
                    strokeColor: color,
                    strokeOpacity: 1.0,
                    strokeWeight: 3
                });

             polyline.setMap(map);


          });


        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

非常感谢任何帮助。

此致

1 个答案:

答案 0 :(得分:0)

使用不同颜色的一个数组。

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

现在,不是绘制一条折线,而是为每个坐标绘制一条单独的折线。

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
  });
}