如何在谷歌地图v3中更改路线的颜色答案

【问题标题】：how to change the color of route in google maps v3如何在谷歌地图v3中更改路线的颜色
【发布时间】：2013-09-26 08:09:28
【问题描述】：

我正在使用这个code 来获取两点之间的方向。是否可以将路线的颜色从蓝色更改？我没有在我的代码中使用折线。

提前感谢:)

【问题讨论】：

标签： google-maps google-maps-api-3 stroke

【解决方案1】：

您可以在创建 DirectionsRenderer 时指定线条的颜色，使用可选的 DirectionsRendererOptions 结构。

这对我有用，只需更改创建 DirectionsRenderer 对象的行：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions: {
      strokeColor: "red"
    }
  });

  var mapOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: {lat: 41.850033, lng: -87.6500523}
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="panel">
    <b>Start: </b>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <b>End: </b>
    <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

【讨论】：

我收到一条错误消息，提示 polylineOptions 后面的冒号是意外的。你能再检查一下代码并给我一些建议吗？
为我工作；我将使用我使用的完整代码更新我的答案。您可能希望将代码添加到您的问题中，以防我们发现语法错误。
可以有五彩线吗？
你能给我举个例子来说明你的意思吗？我认为您无法使用折线来完成，我认为可以使用自定义叠加图块来完成，但这超出了我的知识范围。
检查这张图片中的红色线条 [wiki.zhuk.cc/index.php?title=File:GM-Tutorial-KML-Result.JPG]

【解决方案2】：

你可以通过改变笔触颜色来改变颜色:)就这么简单

    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: "#8b0013" } });
    directionsDisplay.setMap(map);
    directionsDisplay.setOptions({ suppressMarkers: true });


        calcRoute();

【讨论】：

生成静态地图时如何包含“折线（数组）”和“折线选项”？比如：“maps-api-ssl.google.com/maps/api/staticmap?....”