Google Map Route: один источник с несколькими пунктами назначения - PullRequest
Новая
       18

Google Map Route: один источник с несколькими пунктами назначения

2 голосов
/ 25 октября 2011

Есть ли способ или функции на карте Google, которые позволяют вам иметь один источник с несколькими направлениями?

, например 

A --> B
A --> C
A --> D

РЕДАКТИРОВАТЬ: (для смущенного демона)

1010 * например * 

    --> B          
 A |--> C
    --> D

Пока что я сделал это, используя точки: 

A --> B --> A --> C --> A --> D

Но проблема с этим решением состоит в том, что каждый пункт назначения возвращается к источнику. (B к A, C к A)

То, что я хочу, это источник «только к пунктам назначения» без указания маршрутов пункта назначения, возвращающегося к исходному пункту, просто чтобы перейти к следующему пункту назначения, как в первом примере.

Спасибо.

Обновление: Я нашел этот один (матрица расстояний), но проблема с матрицей расстояний заключается в том, что она не возвращает подробную информацию о маршруте, такую ​​как DirectionsService, что мне и нужно.

1 Ответ

2 голосов
/ 25 октября 2011

Я не думаю, что можно получить несколько направлений одновременно. Я построил что-то вроде этого, где я показывал только одно направление за раз, но когда пользователь нажимал на разные пункты назначения в таблице, я каждый раз обновлял направления. 

<!DOCTYPE html>
<html>
<head>
<title>Driving directions between markers</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>

<script>
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay;
    var arrLatLon = [];
    var homeLatlng;
    var destinationID;

    function initialize() {
        homeLatlng = new google.maps.LatLng(54.42838,-2.9623);

        var myOptions = {
            zoom: 10,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var infowindow = new google.maps.InfoWindow({
            content: ''
        });

        directionsDisplay = new google.maps.DirectionsRenderer({
            draggable: true,
            map: map, 
            markerOptions: {
                draggable: true
            },
            panel: document.getElementById("directionsPanel"),
            infoWindow: infowindow
        });

        arrLatLon[1] = new google.maps.LatLng(54.60039,-3.13632);
        arrLatLon[2] = new google.maps.LatLng(54.36897,-3.07561);
        arrLatLon[3] = new google.maps.LatLng(54.5003526,-3.0844116);
        arrLatLon[4] = new google.maps.LatLng(54.57723,-2.79748);

        google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
            computeTotalDistance(directionsDisplay.directions);
        });

        // only seems possible to display 1 directions at a time?
        calcRoute(1);
    }

    function calcRoute(id) {
        var selectedMode = document.getElementById("mode").value;
        var selectedUnits = document.getElementById("units").value;

        if(typeof(id) != "undefined"){
            destinationID = id;
        }

        var request = {
            origin:homeLatlng,
            destination:arrLatLon[destinationID],
            travelMode: google.maps.DirectionsTravelMode[selectedMode],
            unitSystem: google.maps.UnitSystem[selectedUnits]
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });
    }

    function computeTotalDistance(result) {
        var total = 0;
        var myroute = result.routes[0];
        for (var i = 0; i < myroute.legs.length; i++) {
            total += myroute.legs[i].distance.value;
        }
        total = total / 1000;

        var selectedUnits = document.getElementById("units").value;

        if (selectedUnits == "IMPERIAL") {
            document.getElementById("total").innerHTML = (Math.round((total* 0.6214)*100)/100) + " miles";
        } else {
            document.getElementById("total").innerHTML = total + " kilometres";
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map_canvas" style="float:left;width:70%;height:60%"></div>

    <div id="directionsPanel" style="float:right;width:30%;height:60%"></div>

    <p>Total Distance: <span id="total"></span></p>

    <h2>Use the map below to see destinations near Ambleside</h2>
    <h3>More destinations near Ambleside</h3>

    <table id="tableNeighbours" border="1">
        <tr>
            <th>Destination</th>
            <th colspan="2">Distance from Ambleside</th>
        </tr>

            <tr>
                <td><a href="#" onclick="calcRoute(1); return false;">Keswick</a></td>

                <td>22.2 kilometres</td>
                <td>13.8 miles</td>
            </tr>

            <tr>
                <td><a href="#" onclick="calcRoute(2); return false;">Coniston</a></td>
                <td> 9.9 kilometres</td>

                <td> 6.2 miles</td>
            </tr>

            <tr>
                <td><a href="#" onclick="calcRoute(3); return false;">Lake District</a></td>
                <td>11.3 kilometres</td>
                <td> 7.0 miles</td>

            </tr>

            <tr>
                <td><a href="#" onclick="calcRoute(4); return false;">Cumbria</a></td>
                <td>19.7 kilometres</td>
                <td>12.2 miles</td>
            </tr>

    </table>

    <div>
        <strong>Mode of Travel: </strong>
        <select id="mode" onchange="calcRoute()">
          <option value="DRIVING" selected="selected">Driving</option>
          <option value="WALKING">Walking</option>
        </select>
    </div>

    <div>
        <strong>Measurement units: </strong>
        <select id="units" onchange="calcRoute()">
          <option value="IMPERIAL" selected="selected">Miles</option>
          <option value="METRIC ">Kilometres</option>
        </select>
    </div>
</body>
</html>
...