使用多个航点在Google地图上添加infowindow

时间:2015-05-29 13:41:53

标签: php google-maps google-maps-api-3

我在多个源和目的地之间创建多条路线,创建路线一切正常但我想显示包含所有源和目的地的自定义文本的信息窗口,我尝试了很多代码但没有获得成功

以下是我的代码

            <script type="text/javascript">

            var my={directionsSVC:new google.maps.DirectionsService(),
            maps:{},
            routes:{}};

            /**
            * base-class     
            * @param points optional array array of lat+lng-values defining a route
            * @return object Route
            **/                     
            function Route(points)
            {
            this.origin       = null;
            this.destination  = null;
            this.waypoints    = [];
            if(points && points.length>1)
            {
            this.setPoints(points);
            }
            return this; 
            };

            /**
            *  draws route on a map 
            *              
            * @param map object google.maps.Map 
            * @return object Route
            **/                    
            Route.prototype.drawRoute = function(map)
            {
            var _this=this;
            my.directionsSVC.route(
            {'origin': this.origin,
            'destination': this.destination,
            'waypoints': this.waypoints,
            'travelMode': google.maps.DirectionsTravelMode.DRIVING
            },

            function(res,sts) 
            {
            if(sts==google.maps.DirectionsStatus.OK){
            if(!_this.directionsRenderer)
            {
            _this.directionsRenderer 
            = new google.maps.DirectionsRenderer({ 'draggable':false }); 
            }
            _this.directionsRenderer.setMap(map);
            _this.directionsRenderer.setDirections(res);

            google.maps.event.addListener(_this.directionsRenderer,
            'directions_changed',
            function()
            {
            _this.setPoints();
            }
            );
            google.maps.event.addListener(marker, 'click', (function(res, i) {
            return function() {
            infowindow.setContent("hi");
            infowindow.open(res, marker);
            }

            })(res, i));
            }   
            });
            return _this;
            };

            /**
            * sets map for directionsRenderer     
            * @param map object google.maps.Map
            **/             
            Route.prototype.setGMap = function(map){
            this.directionsRenderer.setMap(map);
            };

            /**
            * sets origin, destination and waypoints for a route 
            * from a directionsResult or the points-param when passed    
            * 
            * @param points optional array array of lat+lng-values defining a route
            * @return object Route        
            **/
            Route.prototype.setPoints = function(points)
            {
            this.origin = null;
            this.destination = null;
            this.waypoints = [];
            if(points)
            {
            for(var p=0;p<points.length;++p)
            {
            this.waypoints.push({location:new google.maps.LatLng(points[p][0],
               points[p][1]),
            stopover:false});
            }
            this.origin=this.waypoints.shift().location;
            this.destination=this.waypoints.pop().location;
            }
            else
            {
            var route=this.directionsRenderer.getDirections().routes[0];

            for(var l=0;l<route.legs.length;++l)
            {
            if(!this.origin)this.origin=route.legs[l].start_location;
            this.destination = route.legs[l].end_location;

            for(var w=0;w<route.legs[l].via_waypoints.length;++w)
            {
            this.waypoints.push({location:route.legs[l].via_waypoints[w],
            stopover:false});
            }
            }
            //the route has been modified by the user when you're here
            //you may call now this.getPoints() and work with the result
            }

            return this;
            };

            /**
            * retrieves points for a route 
            *         
            * @return array         
            **/
            Route.prototype.getPoints = function()
            {
            var points=[[this.origin.lat(),this.origin.lng()]];

            for(var w=0;w<this.waypoints.length;++w)
            {
            points.push([this.waypoints[w].location.lat(),
            this.waypoints[w].location.lng()]);
            }

            points.push([this.destination.lat(),
            this.destination.lng()]);
            return points;
            };


            function initialize() 
            {
            bounds = new google.maps.LatLngBounds(), markers=[], alternateMarkers=[], markersIcon=[];
            var latlonPos=new google.maps.LatLng(-34.397, 150.644)

            var myOptions = {
            zoom: 0,
            position:latlonPos,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            my.maps.map1 = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
            /*my.maps.map2 = new google.maps.Map(document.getElementById('map_canvas2'),
            myOptions);
            */      
            my.maps.map1.fitBounds(bounds);

            my.routes.r0 = new Route([
            ['22.6925763','75.8676338'],
            ['22.7197596','75.8570266'],
            ]).drawRoute(my.maps.map1);


            my.routes.r1 = new Route([
            ['22.7195687','75.8577258'],
            ['23.2599333','77.412615'],
            ]).drawRoute(my.maps.map1);


            my.routes.r2 = new Route([
            ['36.4703232','-86.6513845'],
            ['34.0522342','-118.2436849'],
            ]).drawRoute(my.maps.map1);


            my.routes.r3 = new Route([
            ['36.4703232','-86.6513845'],
            ['34.0522342','-118.2436849'],
            ]).drawRoute(my.maps.map1);


            my.routes.r4 = new Route([
            ['-33.864174','151.2052868'],
            ['-37.4713077','144.7851531'],
            ]).drawRoute(my.maps.map1);


            bounds.extend(latlonPos);
            my.routes.rx=new Route();
            }

            google.maps.event.addDomListener(window, 'load', initialize);
            function fx(route)
            {
            var points=my.routes[route].getPoints();
            // alert('copying route '+route+'\n__________\n'+points.join('\n'));
            my.routes.rx.setPoints(points).drawRoute(my.maps.map2);
            }

            </script>

0 个答案:

没有答案