擺脫與谷歌地圖API切換模式站的標記

Question

谷歌地圖API增加站的標記時，模式設置爲像5R標記在這個例子中過境

的suppressMarkers選項禁止在A和B標記，但不抑制車站標記。我們可以做些什麼來擺脫車站標記？

Answer 1

如果使用DirectionsRenderer渲染路線，您將看到那些站點標記。我不確定是否有辦法用這種方法來壓制他們。然而，還有另外一種選擇，用於渲染不首先顯示它們的路線，即使用來自方向api響應的路徑來渲染多段線，例如，

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

Answer 2

相關的問題：How do you change the color of the dotted line on Google map v3 directions

你不能在所有使用方向渲染和自己渲染的方向（如果你想讓它離開面板）

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>