#google-maps-api-3 #knockout.js
#google-maps-api-3 #knockout.js
Вопрос:
Любой, кто может мне в этом помочь.
Я могу показывать альтернативные маршруты от источников до места назначения. Теперь я хочу выделить маршрут, по которому я щелкнул, изменить его цвет, и при перетаскивании этот маршрут должен указать мне его путь. Если я нажму на другой маршрут, предыдущий должен вернуться к своему обычному цвету, и выбранный маршрут должен указать свой путь при перетаскивании. Я реализовал это в нокауте.
<!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.expamp;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 /
Комментарии:
1. @MrUpsidown отображаются альтернативные маршруты, но событие щелчка для каждого альтернативного маршрута не работает. Когда я нажимаю на один из маршрутов. он должен предоставить мне свой routeIndex, а также при перетаскивании его пути. Если я прикрепляю drag eventlistener к directionRenderer, он всегда выдает мне routeIndex как 0.
2. Вы пробовали прослушиватель на
polylinePath
? Это, конечно, не было бы наPolylineOption
.3. @MrUpsidown пробовал, но не работает
4. Что вы пытались отладить? Попробуйте создать jsfiddle. Нелегко пройти через ваш код таким образом.
5. Я просто понимаю, что на полилинии, отображаемой службой маршрутов, нет события щелчка. Вам нужно будет создать полилинию самостоятельно, если вы хотите иметь событие щелчка. Этот пример может быть полезен.