任何可以帮助我的人。
我能够显示从源到目的地的替代路线。现在我想要突出显示我点击的路线，更改其颜色以及拖动该路线应该给我的路径。如果我点击另一条路线，则较早的路线应该恢复到正常颜色，并且所选路线应该在拖动时给出路径。我已经在淘汰赛中实现了这一点。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
html, body, #mapCanvas, #RouteSingerMap {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
margin: 0px auto;
width: 980px;
text-align:center;
z-index: 5;
background-color: #fff;
padding: 10px;
}
.pac-container {
z-index: 9999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"> </script>
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/knockout.js'></script>
<script type='text/javascript' src='js/underscore.js'></script>
<!--<script type='text/javascript' src='js/knockout.google.maps-0.2.0.debug.js'></script>-->
<script type='text/javascript' src='js/ko-googlemap.js'></script>
<script type="text/javascript">
var RouteSinger = ( function (RouteSinger) {
// RouteSinger Google Map Init method
RouteSinger.GMap = function(){
var self = this;
this.Init = function(container){
self.gMapInstance = new RouteSinger.Viewmodel();
ko.applyBindings(self.gMapInstance, $('#'+container)[0]);
self.gMapInstance.applyData();
};
};
// RouteSinger Google Map ViewModel
RouteSinger.Viewmodel = function(){
var that = this;
this.countries = {
'in': {
center: new google.maps.LatLng(22.0, 77.0)
}
};
this.getSource = ko.observable();
this.getDestination = ko.observable();
this.center = ko.observable(that.countries['in'].center);
this.panCenter = ko.observable(true);
this.zoom = ko.observable(8);
this.mapTypeId = ko.observable(google.maps.MapTypeId.ROADMAP);
this.bounds = ko.observable();
this.panBounds = ko.observable(true);
this.MapInstance = ko.observable();
// Computed Methods
this.onSourceDestinationChanged = ko.computed(function(){
if(that.getSource()){
// do something
}
if(that.getDestination()){
}
});
// Main Methods
this.ShowRoutes = function(){
// do something
var self = this;
// Direction Service
this.directionsService = new google.maps.DirectionsService();
this.main_route = true;
this.request = {
origin: 'Bangalore, Karnataka, India',
destination: 'Jodhpur, Rajasthan, India',
provideRouteAlternatives: true,
travelMode: google.maps.TravelMode[$('#mode').val()],
avoidHighways : false,
avoidTolls: false
};
this.RouteSingerMapDirections = ko.observableArray();
this.directionRenderer = function(result, routeToDisplay, map){
var self = this;
this.routeIndex = ko.observable(routeToDisplay);
this.PolylineOption = {
_colour: '',
_strokeWeight: '',
_strokeOpacity: '',
_suppressMarkers: '',
isClickable: true
};
this.isDraggable = true;
this.isClicked = ko.observable(false);
if(routeToDisplay==0){
self.PolylineOption._colour = '#00458E';
self.PolylineOption._strokeWeight = 6;
self.PolylineOption._strokeOpacity = 1.0;
self.PolylineOption._suppressMarkers = false;
}else{
self.PolylineOption._colour = '#ED1C24';
self.PolylineOption._strokeWeight = 6;
self.PolylineOption._strokeOpacity = 0.7;
self.PolylineOption._suppressMarkers = false;
}
this.directionsRenderer = new google.maps.DirectionsRenderer({
draggable: self.isDraggable,
suppressMarkers: self.PolylineOption._suppressMarkers,
polylineOptions: {
clickable: self.PolylineOption.isClickable,
strokeColor: self.PolylineOption._colour,
strokeWeight: self.PolylineOption._strokeWeight,
strokeOpacity: self.PolylineOption._strokeOpacity
}
});
this.directionsRenderer.setMap(map);
this.directionsRenderer.setDirections(result);
this.directionsRenderer.setRouteIndex(routeToDisplay);
google.maps.event.addListener(self.PolylineOption, 'click', function() {
alert(this.strokeColor);
});
};
self.directionsService.route(self.request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
if(self.main_route){
for (var i = 0; i < response.routes.length; i++){
console.log(i);
self.RouteSingerMapDirections.push(new self.directionRenderer(response, i, that.MapInstance()));
}
}else{
self.RouteSingerMapDirections.push(new self.directionRenderer(response, routeToDisplay, that.MapInstance()));
}
}else{
alert("Unable to retrieve your route");
}
});
};
this.ClearRoutes = function(){
// do something
};
this.applyData = function(){
//that.rsMap();
};
};
return RouteSinger;
}(RouteSinger || {}));
$(function(){
var gMap = new RouteSinger.GMap();
gMap.Init('RouteSingerMap');
});
</script>
</head>
<body>
<div id="RouteSingerMap">
<div id="panel">
<b>Mode of Travel: </b>
<select id="mode" onChange="calcRoute()">
<option value="DRIVING" selected="selected">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
<b>Source: </b>
<input placeholder="Enter Source" type="text" data-bind="Autocomplete: getSource" />
<b>Destination: </b>
<input placeholder="Enter Destination" type="text" data-bind="Autocomplete: getDestination" />
<input type="button" id="Route" value="Show Routes" data-bind="click: ShowRoutes" />
<input type="button" id="ClearRoute" value="Clear Route" data-bind="click: ClearRoutes" />
</div>
<div id="directionsPanel"></div>
<div id="mapCanvas" data-bind="map: $data"></div>
</div>
</body>
</html>
以下是工作jsfiddle：http://jsfiddle.net/haridarshan/SM9pR/5/