在谷歌地图API上设置折线颜色的条件

Posted 2023-02-23

【中文标题】在谷歌地图API上设置折线颜色的条件

【英文标题】：Make condition to set the colour of polyline on google maps API

【发布时间】：2017-06-29 21:30:41

【问题描述】：

我一直在谷歌地图上制作折线。但我想将折线设置为 3 种颜色。有条件可以设置，但是不知道怎么设置。这是代码

    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';

【问题讨论】：

Changing color for the Multiple Polyline stroke on google map v3 in javascript的可能重复

Color variations Polyline property in Google maps API的可能重复

Use Google maps API to draw a polyline that changes color的可能重复

相关问题：how to draw a google maps waypoint with multi-colored polylines

Google Map API v3 — set bounds and center的可能重复

【参考方案1】：

您需要处理您的数组，为数据中的每组两个点创建单独的折线，为每个段分配与其一个端点相关联的颜色。

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

proof of concept fiddle

代码 sn-p：

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>

【参考方案2】：

你可以试试 setOption

 if($data['kon_jem']>0 && $data['kon_jem']<3)
      path.polyline.setOptions(strokeColor:'#ffffff');
 
 .....

【讨论】：

谢谢，但你能告诉我必须把它放在哪里吗？我已经尝试了该代码，但我的地图没有加载

我已经查看/复制了你的代码。为了写下答案......你应该知道代码的位置吗.. 无论如何，事实是现有对象上的 setOption，您应该在创建折线后应用此代码

@scaisEdge: .sir 告诉我一件事，我有起点和终点数组并绘制折线，但我有另一个不同的纬度和经度的驱动程序，我们需要在驱动程序到达 prevoius 后更改折线颜色路径和下一条路径。我通过驱动程序 lat 和 lng 改变了颜色。告诉我先生如何管理这种情况？

@Kapilsoni .. 并不容易 .. 取决于你如何知道骑手何时改变下一条路径 .. 你需要一个函数来评估这个 .. .. （但并不容易）..

@scaisEdge: 好的先生，我知道这并不容易，但我需要实现这个功能请告诉我怎么做？