Knockout点击事件替代路线谷歌地图API

时间:2014-06-24 12:48:17

标签: 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.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/

0 个答案:

没有答案