drvonr6573 2015-05-29 13:41
浏览 32

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

I am creating multiple route between multiple source and destination, route is created all is working fine but i want to display info window with custom text with all source and destination, i tried many code but not getting success

Below is my code

            <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+'
__________
'+points.join('
'));
            my.routes.rx.setPoints(points).drawRoute(my.maps.map2);
            }

            </script>
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 matlab(相关搜索:紧聚焦)
    • ¥15 基于51单片机的厨房煤气泄露检测报警系统设计
    • ¥15 路易威登官网 里边的参数逆向
    • ¥15 Arduino无法同时连接多个hx711模块,如何解决?
    • ¥50 需求一个up主付费课程
    • ¥20 模型在y分布之外的数据上预测能力不好如何解决
    • ¥15 processing提取音乐节奏
    • ¥15 gg加速器加速游戏时,提示不是x86架构
    • ¥15 python按要求编写程序
    • ¥15 Python输入字符串转化为列表排序具体见图,严格按照输入