Question

目前，我可以显示多条路线和一个切换按钮，以便查看流量。问题是我无法显示多条路线的距离和时间。

很感激有人可以帮助我;如果有人可以教我如何将下拉列表链接到路线，也会很棒。

以下是我的代码的链接：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDy5tfqZnc2l2wYOM0rzJhJ1BRvkxf1_r4"></script>
 <h1>MAPS</h1>

<div id="map_canvas" style="height:600px;width:600px;"></div>
<div id="UI" style="visibility:hidden">
    <button id="trafficToggle">Toggle Traffic Layer</button>

<div id="map_canvas"></div>
    <div style="margin-top: 0px;" align="left">
     <h3> <label>Start</label></h3>
      <select id="search-string-l0" onchange="changeMapl0(this.value);">
        <option value="">--Select--</option>
        <option value="*">ALL</option>
        <option value="Hougang">Hougang</option>
        <option value="Kovan">Kovan</option>
        <option value="Serangoon">Serangoon</option>
</select>
    </div>          
          <div id="map_canvas"></div>
    <div style="margin-top: -78px;" align="middle">
     <h3> <label>End</label></h3>
<select id="search-string-l0" onchange="changeMapl0(this.value);">
        <option value="">--Select--</option>
        <option value="*">ALL</option>
        <option value="Punggol">Punggol</option>
        <option value="Sengkang">Sengkang</option>
        <option value="Buangkok">Buangkok</option>
          </select>
    </div>

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

function Route(points) {
    this.origin = null;
    this.destination = null;
    this.waypoints = [];
    if (points && points.length > 1) {
        this.setPoints(points);
    }
    return this;
};

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': true
                });
            }
            _this.directionsRenderer.setMap(map);
            _this.directionsRenderer.setDirections(res);

            google.maps.event.addListener(_this.directionsRenderer,
                'directions_changed',

            function () {
                _this.setPoints();
            });
        }
    });
    return _this;
};

Route.prototype.setGMap = function (map) {
    this.directionsRenderer.setMap(map);
};

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
                });
            }
        }
    }

    return this;
};

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;
};


var map, trafficLayer;

function toggleTraffic() {
    if (trafficLayer.getMap() == null) {

        trafficLayer.setMap(my.maps.map1);
    } else {
        trafficLayer.setMap(null);
    }
}


function initialize() {
    var myOptions = {
        zoom: 12,
        center: new google.maps.LatLng(1.357990, 103.814432),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    my.maps.map1 = new google.maps.Map(document.getElementById('map_canvas'),
    myOptions);


    trafficLayer = new google.maps.TrafficLayer();
    google.maps.event.addDomListener(document.getElementById('trafficToggle'), 'click', toggleTraffic);

    my.routes.r1 = new Route([
        [1.403982, 103.862840],
        [1.406041, 103.731004]
    ]).drawRoute(my.maps.map1);

    my.routes.r2 = new Route([
        [1.361422, 103.860437],
        [1.374121, 103.758470]
    ]).drawRoute(my.maps.map1);

    my.routes.r3 = new Route([
        [1.308908, 103.881036],
        [1.335680, 103.726198]
    ]).drawRoute(my.maps.map1);

    my.routes.rx = new Route();

    document.getElementById('UI').style.visibility = 'visible';
}

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);
}

如何显示所有路线的距离和时间？

0 个答案: