设置条件以在Google Maps API上设置折线的颜色 [英] Make condition to set the colour of polyline on google maps API

问题描述

我一直在Google Maps上制作折线.但是我想将折线设置为3种颜色.我有条件设置它，但不知道如何放置它.这是代码

I've been make polyline on google Maps. But I wanna set the polyline into 3 colours. I have conditions to set it, but don't know how to place it. this is the code

    var polylinePlanCoordinates  = [];
     var polyline_data = <?php echo json_encode($data); ?>;
     for (var i=0;i< polyline_data.length;i++ ){
      polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i]['latitude'], polyline_data[i]['longitude']));
    }

    var path= new google.maps.Polyline({
      path: polylinePlanCoordinates,
     geodesic: true,
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 5
     });

     path.setMap(map);
}



google.maps.event.addDomListener(window, 'load', initialize);

条件是

if(polyline_data[i]['kon_jem']>0 && polyline_data[i]['kon_jem']<3){
strokeColor: '#ffffff';
}
else if (polyline_data[i]['kon_jem']>3 && polyline_data[i]['kon_jem']<9){
strokeColor: '#000000';
}
else if (polyline_data[i]['kon_jem']>9){
strokeColor: '#fff000';
}

推荐答案

您需要遍历数组，为数据中的每两个点集创建单独的折线，为每个线段分配与其端点之一关联的颜色.

You need to process through your array creating individual polylines for each set of two points in your data, assign each segment the color associated with one of its endpoints.

// only go to length - 1 or you will overrun the array
for (var i = 0; i < polyline_data.length - 1; i++) {
  // for each segment of two points
  var polylinePlanCoordinates = [];
  polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i]['latitude'], polyline_data[i]['longitude']));
  polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i + 1]['latitude'], polyline_data[i + 1]['longitude']));

  // create a polyline
  var path = new google.maps.Polyline({
    path: polylinePlanCoordinates,
    geodesic: true,
    strokeOpacity: 1.0,
    strokeWeight: 5
  });
  // set the color of the segment based on the lowest index point
  if (polyline_data[i]['kon_jem'] > 0 && polyline_data[i]['kon_jem'] < 3) {
    path.setOptions({
      strokeColor: '#ffffff'
    });
  } else if (polyline_data[i]['kon_jem'] > 3 && polyline_data[i]['kon_jem'] < 9) {
    path.setOptions({
      strokeColor: '#000000'
    });
  } else if (polyline_data[i]['kon_jem'] > 9) {
    path.setOptions({
      strokeColor: '#fff000'
    });
  }
  path.setMap(map);
}

概念提琴证明

代码段:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polyline_data.length - 1; i++) {
    // for each segment of two points
    var polylinePlanCoordinates = [];
    polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i]['latitude'], polyline_data[i]['longitude']));
    polylinePlanCoordinates.push(new google.maps.LatLng(polyline_data[i + 1]['latitude'], polyline_data[i + 1]['longitude']));

    // create a polyline
    var path = new google.maps.Polyline({
      path: polylinePlanCoordinates,
      geodesic: true,
      strokeOpacity: 1.0,
      strokeWeight: 5
    });
    bounds.extend(path.getPath().getAt(0));
    bounds.extend(path.getPath().getAt(1));

    if (polyline_data[i]['kon_jem'] > 0 && polyline_data[i]['kon_jem'] < 3) {
      path.setOptions({
        strokeColor: '#ffffff'
      });
    } else if (polyline_data[i]['kon_jem'] > 3 && polyline_data[i]['kon_jem'] < 9) {
      path.setOptions({
        strokeColor: '#000000'
      });
    } else if (polyline_data[i]['kon_jem'] > 9) {
      path.setOptions({
        strokeColor: '#fff000'
      });
    }
    path.setMap(map);

  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var polyline_data = [
  {latitude: 0, longitude: 0, kon_jem: 0},
  {latitude: 0.1, longitude: 0.2, kon_jem: 1},
  {latitude: 0.2, longitude: 0.1, kon_jem: 2},
  {latitude: 0.3, longitude: 0.2, kon_jem: 3},
  {latitude: 0.4, longitude: 0.1, kon_jem: 4},
  {latitude: 0.5, longitude: 0.2, kon_jem: 5},
  {latitude: 0.6, longitude: 0.1, kon_jem: 6},
  {latitude: 0.7, longitude: 0.2, kon_jem: 7},
  {latitude: 0.8, longitude: 0.1, kon_jem: 8},
  {latitude: 0.9, longitude: 0.3, kon_jem: 9},
  {latitude: 0.9, longitude: 0.1, kon_jem: 10},
  {latitude: 1.0, longitude: 0.1, kon_jem: 11},
  {latitude: 1.1, longitude: 0.2, kon_jem: 12},
  {latitude: 1.2, longitude: 0.1, kon_jem: 13},
  ];

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

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

这篇关于设置条件以在Google Maps API上设置折线的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！