如何更改谷歌地图 v3 中路线的颜色 [英] how to change the color of route in google maps v3

查看：31
本文介绍了如何更改谷歌地图 v3 中路线的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用此代码来获取两点之间的路线.是否可以将路线的颜色从蓝色更改?我没有在代码中使用折线.

提前谢谢:)

解决方案

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

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

<头><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8"><title>路线服务</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><脚本>var 方向显示；var directionService = new google.maps.DirectionsService();无功地图；函数初始化(){方向显示 = 新的 google.maps.DirectionsRenderer({折线选项:{笔触颜色:红色"}});var mapOptions = {变焦:7，mapTypeId: google.maps.MapTypeId.ROADMAP,中心:{lat:41.850033，lng:-87.6500523}}map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);DirectionsDisplay.setMap(地图);}函数 calcRoute() {var start = document.getElementById('start').value;var end = document.getElementById('end').value;无功请求 = {起源:开始，目的地:结束，旅行模式:google.maps.DirectionsTravelMode.DRIVING};路线Service.route(请求，功能(响应，状态){如果(状态 == google.maps.DirectionsStatus.OK){DirectionsDisplay.setDirections(响应)；}});}google.maps.event.addDomListener(window, 'load', initialize);<身体><div id="面板"><b>开始:</b><select id="start" onchange="calcRoute();"><option value="chicago, il">芝加哥</option><option value="st louis, mo">圣路易斯</option><option value="joplin, mo">Joplin, MO</option><option value="oklahoma city, ok">俄克拉荷马城</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">金曼</option><option value="barstow, ca">Barstow</option><option value="san bernardino, ca">圣贝纳迪诺</option><option value="洛杉矶，加利福尼亚">洛杉矶</option></选择><b>结束:</b><select id="end" onchange="calcRoute();"><option value="chicago, il">芝加哥</option><option value="st louis, mo">圣路易斯</option><option value="joplin, mo">Joplin, MO</option><option value="oklahoma city, ok">俄克拉荷马城</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">金曼</option><option value="barstow, ca">Barstow</option><option value="san bernardino, ca">圣贝纳迪诺</option><option value="洛杉矶，加利福尼亚">洛杉矶</option></选择>

<div id="map-canvas"></div>

I am using this code to get directions between two points. Is it possible to change the color of the route from blue? I am not using polyline in my code.

Thanx in advance :)

解决方案

You can specify the color of the line when you create the DirectionsRenderer, using the optional DirectionsRendererOptions struct.

This works for me, simply changing the line where the DirectionsRenderer object is created:

<!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>

这篇关于如何更改谷歌地图 v3 中路线的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆