你如何改变谷歌地图v3方向上虚线的颜色 [英] How do you change the color of the dotted line on Google map v3 directions

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

问题描述

我正在处理公交路线，并且已经能够使用polylineOptions属性更改过境路线显示的折线的颜色。

然而，我无法改变显示行走方向的虚线颜色。



我确实遇到过这个解决方案，但它不适用于v3（用v3.22试用过）

类似的StackOverflow问题



我在这个 JS Fiddle


$ b

var directions = new google.maps。 DirectionsService（）; var renderer = new google.maps.DirectionsRenderer（{polylineOptions：{strokeColor：'＃C83939'，strokeOpacity：0.8，strokeWeight：7}}）; var map，transitLayer; function initialize（）{var mapOptions = { zoom：13，center：new google.maps.LatLng（40.7482333，-73.8681295），mapTypeId：google.maps.MapT ypeId.ROADMAP}; map = new google.maps.Map（document.getElementById（'map'），mapOptions）; google.maps.event.addDomListener（document.getElementById（'go'），'click'，route）; var input = document.getElementById（'from'）; var autocomplete = new google.maps.places.Autocomplete（input）; autocomplete.bindTo（'bounds'，map）; transitLayer = new google.maps.TransitLayer（）; var control = document.getElementById（'transit-wpr'）; map.controls [google.maps.ControlPosition.TOP_RIGHT] .push（对照）; google.maps.event.addDomListener（control，'click'，function（）{transitLayer.setMap（transitLayer.getMap（）？null：map）;}）; addDepart（）; route（）;} function addDepart（）{var depart = document.getElementById（'depart'）;对于（var i = 0; j< 60; j + = 15）{var x = i< 10？ '0'+ i：i; var y = j< 10？ '0'+ j：j; depart.innerHTML + ='< option>'+ x +'：'+ y +'< / option>'; }}} function route（）{var departure = document.getElementById（'depart'）.value; var bits = departure.split（'：'）; var now = new Date（）; var tzOffset =（now.getTimezoneOffset（）+ 60）* 60 * 1000; var time = new Date（）; time.setHours（位[0]）; time.setMinutes（位[1]）; var ms = time.getTime（） - tzOffset;如果（ms

html，body {height：100％;填充：0;保证金：0;颜色：黑色; font-family：arial，sans-serif; font-size：13px;}＃map {position：absolute; top：0;底部：0;左：0;右：50％;}＃panel-wpr {position：absolute; top：0;底部：0;剩下：50％;正确：0; overflow：auto;}＃panel {font-family：arial; padding：0 5px;}＃info {padding：5px;}＃from {width：90％; font-size：1.2em;}。adp-directions {width：100％;}。input {background-color：white; padding-left：8px; border：1px solid＃D9D9D9; border-top：1px纯银; -webkit-border-radius：1px; -moz-border-radius：1px; border-radius：1px;}。time {margin：0; height：17px; border：1px solid;边框顶部颜色：#CCC;边界 - 右边颜色：＃999;边界 - 左边的颜色：＃999; border-bottom-color：#CCC; padding：2px 15px 1px 1px;} button {border：1px solid＃3079ED;白颜色;背景颜色：＃4D90FE; background-image：-webkit-gradient（线性，左上，左下，从（＃4D90FE）到（＃4787ED））; background-image：-webkit-linear-gradient（top，＃4D90FE，＃4787ED）; background-image：-moz-linear-gradient（top，＃4D90FE，＃4787ED）; background-image：-ms-linear-gradient（top，＃4D90FE，＃4787ED）; background-image：-o-linear-gradient（top，＃4D90FE，＃4787ED）; background-image：线性渐变（顶部，＃4D90FE，＃4787ED）; filter：progid：DXImageTransform.Microsoft.gradient（startColorStr ='＃4d90fe'，EndColorStr ='＃4787ed'）;显示：inline-block; min-width：54px; text-align：center; font-weight：bold; padding：0 8px; line-height：27px; -webkit-border-radius：2px; -moz-border-radius：2px; border-radius：2px; -webkit-transition：全部为0.218s; -moz-transition：全部为0.218s; -o-transition：全部为0.218s; transition：all 0.218s;}＃info div {line-height：22px; font-size：110％;}。btn {}＃panel-wpr {border-left：1px solid＃e6e6e6;}＃info {border-bottom：1px solid＃E6E6E6; margin-bottom：5px;} h2 {margin：0; padding：0;} 

 < title> Google Maps JavaScript API v3示例：Transit< / title>< div id =transit-wpr> < button id =transit>切换转接层< / button>< / div>< div id =map>< / div>< div id =panel-wpr> < div id =info> < DIV> < h2>运输路线< / h2> < / DIV> < DIV> <标签>从：其中/标签> < input class =inputid =fromvalue =Grand Central 42，NY> < / DIV> < DIV> <标签>到：其中/标签> < strong> 51 St，纽约，纽约10022，美国< / strong> < / DIV> < div>在< select id =depart>中出发< / select> < / DIV> < div class =btn> < button id =go>获取路线< / button> < / DIV> < / DIV> < div id =panel>< / div>< / div>

任何可用的属性，我已经错过了，或这是不可能的？

解决方案

这些选项线是固定的，不会受到DirectionsRenderer的polylineOptions的影响。



这些虚线的polylineOptions将（当前）由API设置为：

  {
图标：[{
icon：{
path：0 ，
scale：3，
fillOpacity：0.7，
fillColor：＃00b3fd，
strokeOpacity：0.8，
strokeColor ：＃3379c3，
strokeWeight：1 
}，
repeat：10px
}]，
strokeColor：＃ 000000，
strokeOpacity：0，
strokeWeight：5 
}

... DirectionsRenderer的任何自定义polylineOption都将被忽略。



可能的解决方法（但它会只能为所有这些虚线设置单个固定值）：

function initMap（）{var goo = google.maps，map = new goo.Map（document.getElementById（'map'），{zoom：7，center：{lat：41.85，lng：-87.65}}），directionsService = new goo.DirectionsService，directionsDisplay = new goo.DirectionsRenderer（{map：map，polylineOptions：{strokeColor：'red'}}）; google.maps.Polyline.prototype.setMap =（function（f，r）{return function（map）{if（this.get（'icons'）&& this.get（'icons'）。length == = 1&& this.get（'strokeOpacity'）=== 0&&！this.get（'noRoute'））{if（r.get（'polylineOptions'）&& r.get （'polylineOptions'）。strokeColor）{var icons = this.get（'icons'），color = r.get（'polylineOptions'）。strokeColor;图标[0] .icon.fillOpacity = 1;图标[0]。 icon.fillColor = color; icons [0] .icon.strokeColor = color; this.set（'icons'，icons）;}} f.apply（this，arguments）;}}）（google.maps.Polyline.prototype .setMap，directionsDisplay）; directionsService.route（{origin：new google.maps.LatLng（52.549917,13.42539669），destination：new google.maps.LatLng（52.541843,13.4206566），travelMode：google.maps.TravelMode.TRANSIT}，function（response，status） {if（status === google.maps.DirectionsStatus.OK）{directionsDisplay.setDirections（response）;} else {window.alert（'Directions requests failed to'+'status）;}}）;}

html，body，＃map {height：100％;保证金：0;填充：0; }

< div id =map><<< ; / div>< script src =https://maps.googleapis.com/maps/api/js?callback=initMapasync defer>< / script> setMap - > google.maps.Polyline



它检查是否


  1. strokeOpacity为0

  2. 带有单个图标的IconSequence存在
  3. 它没有 noRoute -property（如果你自己绘制的多段线符合前2条件设​​置 noRoute -option为真，否则它们会也会受到影响）

当所有3个条件都为真时，它将修改折线的图标属性。

I am working on Transit directions and have been able to change the color of polyline displayed for transit route using polylineOptions property.

However, I am not able to change the color of dotted line displayed for walking directions.

I did come across this solution, but it doesnt work for v3 (tried with v3.22)

Similar StackOverflow Question

I have included a working example in this JS Fiddle

var directions = new google.maps.DirectionsService();
var renderer = new google.maps.DirectionsRenderer({
  polylineOptions: {
    strokeColor: '#C83939',
    strokeOpacity: 0.8,
    strokeWeight: 7
  }

});
var map, transitLayer;

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(40.7482333, -73.8681295),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  google.maps.event.addDomListener(document.getElementById('go'), 'click',
    route);

  var input = document.getElementById('from');
  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  transitLayer = new google.maps.TransitLayer();

  var control = document.getElementById('transit-wpr');
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);

  google.maps.event.addDomListener(control, 'click', function() {
    transitLayer.setMap(transitLayer.getMap() ? null : map);
  });

  addDepart();
  route();
}

function addDepart() {
  var depart = document.getElementById('depart');
  for (var i = 0; i < 24; i++) {
    for (var j = 0; j < 60; j += 15) {
      var x = i < 10 ? '0' + i : i;
      var y = j < 10 ? '0' + j : j;
      depart.innerHTML += '<option>' + x + ':' + y + '</option>';
    }
  }
}

function route() {
  var departure = document.getElementById('depart').value;
  var bits = departure.split(':');
  var now = new Date();
  var tzOffset = (now.getTimezoneOffset() + 60) * 60 * 1000;

  var time = new Date();
  time.setHours(bits[0]);
  time.setMinutes(bits[1]);

  var ms = time.getTime() - tzOffset;
  if (ms < now.getTime()) {
    ms += 24 * 60 * 60 * 1000;
  }

  var departureTime = new Date(ms);

  var request = {
    origin: document.getElementById('from').value,
    destination: '51 St, New York, NY 10022, USA',
    travelMode: google.maps.DirectionsTravelMode.TRANSIT,
    provideRouteAlternatives: true,
    transitOptions: {
      departureTime: departureTime
    }
  };

  var panel = document.getElementById('panel');
  panel.innerHTML = '';
  directions.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      renderer.setDirections(response);
      renderer.setMap(map);
      renderer.setPanel(panel);
      console.log(renderer.getDirections());
    } else {
      renderer.setMap(null);
      renderer.setPanel(null);
    }

  });

}

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

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  color: black;
  font-family: arial, sans-serif;
  font-size: 13px;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
}
#panel-wpr {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  overflow: auto;
}
#panel {
  font-family: arial;
  padding: 0 5px;
}
#info {
  padding: 5px;
}
#from {
  width: 90%;
  font-size: 1.2em;
}
.adp-directions {
  width: 100%;
}
.input {
  background-color: white;
  padding-left: 8px;
  border: 1px solid #D9D9D9;
  border-top: 1px solid silver;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}
.time {
  margin: 0;
  height: 17px;
  border: 1px solid;
  border-top-color: #CCC;
  border-right-color: #999;
  border-left-color: #999;
  border-bottom-color: #CCC;
  padding: 2px 15px 1px 1px;
}
button {
  border: 1px solid #3079ED;
  color: white;
  background-color: #4D90FE;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#4D90FE), to(#4787ED));
  background-image: -webkit-linear-gradient(top, #4D90FE, #4787ED);
  background-image: -moz-linear-gradient(top, #4D90FE, #4787ED);
  background-image: -ms-linear-gradient(top, #4D90FE, #4787ED);
  background-image: -o-linear-gradient(top, #4D90FE, #4787ED);
  background-image: linear-gradient(top, #4D90FE, #4787ED);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe', EndColorStr='#4787ed');
  display: inline-block;
  min-width: 54px;
  text-align: center;
  font-weight: bold;
  padding: 0 8px;
  line-height: 27px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all 0.218s;
  -moz-transition: all 0.218s;
  -o-transition: all 0.218s;
  transition: all 0.218s;
}
#info div {
  line-height: 22px;
  font-size: 110%;
}
.btn {} #panel-wpr {
  border-left: 1px solid #e6e6e6;
}
#info {
  border-bottom: 1px solid #E6E6E6;
  margin-bottom: 5px;
}
h2 {
  margin: 0;
  padding: 0;
}

<title>Google Maps JavaScript API v3 Example: Transit</title>
<div id="transit-wpr">
  <button id="transit">Toggle transit layer</button>
</div>
<div id="map"></div>
<div id="panel-wpr">
  <div id="info">
    <div>
      <h2>Transit directions</h2>
    </div>
    <div>
      <label>from:</label>
      <input class="input" id="from" value="Grand Central 42, NY">
    </div>
    <div>
      <label>to:</label>
      <strong>51 St, New York, NY 10022, USA</strong>
    </div>
    <div>Depart at
      <select id="depart"></select>
    </div>
    <div class="btn">
      <button id="go">Get Directions</button>
    </div>
  </div>
  <div id="panel"></div>
</div>

Any property available which I have missed, or this is not possible?

解决方案

The options for these lines are fixed and will not be affected by the polylineOptions of the DirectionsRenderer.

The polylineOptions for these dotted lines will (currently) be set by the API to:

{
  "icons": [{
    "icon": {
      "path": 0,
      "scale": 3,
      "fillOpacity": 0.7,
      "fillColor": "#00b3fd",
      "strokeOpacity": 0.8,
      "strokeColor": "#3379c3",
      "strokeWeight": 1
    },
    "repeat": "10px"
  }],
  "strokeColor": "#000000",
  "strokeOpacity": 0,
  "strokeWeight": 5
}

...any custom polylineOption of the DirectionsRenderer will be ignored.

A possible workaround(but it will only be possible to set a single fixed value for all these dotted lines):

function initMap() {
     var  goo = google.maps,
          map = new goo.Map(document.getElementById('map'), {
                  zoom: 7,
                  center: {lat: 41.85, lng: -87.65}
                }),
          directionsService       = new goo.DirectionsService,
          directionsDisplay       = new goo.DirectionsRenderer({
                                      map:map,
                                      polylineOptions:{
                                        strokeColor:'red'
                                      }});
      google.maps.Polyline.prototype.setMap=(function(f,r){
      
        return function(map){
          if(
            this.get('icons')
              &&
            this.get('icons').length===1
              &&
            this.get('strokeOpacity')===0
              &&
            !this.get('noRoute')
          ){
            if(r.get('polylineOptions')&& r.get('polylineOptions').strokeColor){
              
              var icons=this.get('icons'),
                  color=r.get('polylineOptions').strokeColor;
              icons[0].icon.fillOpacity=1;
              icons[0].icon.fillColor=color;
              icons[0].icon.strokeColor=color;
              this.set('icons',icons);
          }}
        f.apply(this,arguments);
      }
      
     })(
          google.maps.Polyline.prototype.setMap,
          directionsDisplay);
    
  
  directionsService.route({
    origin: new google.maps.LatLng(52.549917, 13.42539669),
    destination: new google.maps.LatLng(52.541843, 13.4206566),
    travelMode: google.maps.TravelMode.TRANSIT
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

html, body,#map  {
        height: 100%;
        margin: 0;
        padding: 0;
      }

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>

It overrides the setMap-method of google.maps.Polyline

It checks if

  1. the strokeOpacity is 0
  2. a IconSequence with a single icon is present
  3. it doesn't have a noRoute-property(in the case that you draw polylines on your own which match the first 2 condition set a noRoute-option to true, otherwise they will be affected too)

When all 3 conditions are true, it will modify the icons-property of the polyline.

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

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