使用 Google 路线 API 公交模式摆脱车站标记

Question

Google 方向 API 当模式设置为过境时添加车站标记，如本例中的 5R 标记：

suppressMarkers 选项会抑制 A 和 B 标记，但不会抑制站标记。我们可以做些什么来摆脱车站标记？

Answer 1

如果您使用 DirectionsRenderer 渲染路线，您将看到这些车站标记。我不确定是否有任何方法可以用这种方法抑制它们。然而，还有另一种渲染路线的选项，它首先不会显示它们，即使用方向 api 响应中的路径渲染多段线，例如

new google.maps.Polyline({"path": response.routes[0].overview_path, ...})

Answer 2

相关问题：

您根本无法使用路线渲染器并自行渲染路线（如果需要，请离开面板）

proof of concept fiddle

代码片段：

var directions = new google.maps.DirectionsService();
var renderer = new google.maps.DirectionsRenderer({
  suppressPolylines: true,
  suppressMarkers: true
});
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.addListener(renderer, "routeindex_changed", function() {

    renderDirectionsPolylines(renderer.getDirections(), renderer.getRouteIndex());
  });

  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(null);
      renderer.setPanel(panel);
      renderDirectionsPolylines(response);
      console.log(renderer.getDirections());
    } else {
      renderer.setMap(null);
      renderer.setPanel(null);
    }
  });
}
var polylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 1,
  strokeWeight: 4
};
var walkingPolylineOptions = {
  strokeColor: '#C83939',
  strokeOpacity: 0,
  strokeWeight: 4,
  icons: [{
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: '#C83939',
      fillOpacity: 1,
      scale: 2,
      strokeColor: '#C83939',
      strokeOpacity: 1,
    },
    offset: '0',
    repeat: '10px'
  }]
};
var polylines = [];

function renderDirectionsPolylines(response, index) {
  if (!index) index = 0;
  for (var i = 0; i < polylines.length; i++) {
    polylines[i].setMap(null);
  }
  var bounds = new google.maps.LatLngBounds();
  var legs = response.routes[index].legs;
  for (i = 0; i < legs.length; i++) {
    var steps = legs[i].steps;
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      if (steps[j].travel_mode == google.maps.TravelMode.WALKING) {
        stepPolyline.setOptions(walkingPolylineOptions)
      }
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
        bounds.extend(nextSegment[k]);
      }
      stepPolyline.setMap(map);
      polylines.push(stepPolyline);
      map.fitBounds(bounds);
    }
  }
}
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;
}

<script src="http://maps.googleapis.com/maps/api/js?v=3.22&libraries=places"></script>
<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>

Answer 3

我遇到了同样的问题，我只需要去掉相关图片的“5R”标签。我在地图上有多条路线都带有这些 TransitLine 标记，需要删除它们。

这从 google 地图 API 版本 3.40.9

起有效

var directionsRender;
var directionsService = new google.maps.DirectionsService();
var map;

function initMap() {
  // setup map
  map = new google.maps.Map(document.getElementById('address-map'), {
    center: new google.maps.LatLng(51.507927, -0.0877726),
    zoom: 12
  });
}

directionsService.route(route_api_request, function(response, status) {
  if (status === 'OK') {
    // add in new response
    directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setDirections(response);
    directionsRenderers.setMap(map);
  } else {
    window.alert('Directions request failed due to ' + status);
  }
});

function removeTransitLines() {
  if (directionsRenderer.getDirections().request.travelMode == 'TRANSIT') {
    var transit_steps_length = directionsRenderer.getDirections().routes[0].legs[0].steps.length;
    for (let i = 0; i < transit_steps_length - 1; i++) {
      try {
        // set the transitline to null
        directionsRenderer.getDirections().routes[0].legs[0].steps[i].transit = null;
      } catch (err) {
        // no transitline in this step so error is thrown
        continue;
      }
    }
    directionsRenderer.setMap(map);
  }
}

基本上你需要运行通过腿部的所有步骤，在directionsRenderer对象的路线中然后将具有transitLine的那些设置为空。

使用 Google 路线 API 公交模式摆脱车站标记

Getting rid of station markers with Google Directions API transit mode

markers

google-maps-api-3

directions