Блог

Главная - Вопросы по программированию - Событие щелчка нокаута для альтернативных маршрутов Google Map API

Событие щелчка нокаута для альтернативных маршрутов Google Map API

#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. Я просто понимаю, что на полилинии, отображаемой службой маршрутов, нет события щелчка. Вам нужно будет создать полилинию самостоятельно, если вы хотите иметь событие щелчка. Этот пример может быть полезен.