Question

Google地图中是否有任何方式或功能可供您使用一个有多个方向的单一来源？

e.g。

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

编辑:(对于困惑的恶魔）

e.g

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

到目前为止，我所做的就是使用航点：

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

但该解决方案的问题在于，每个目的地都会返回原点。（B到A，C到A）

我想要的是“仅限目的地”而不显示回到原点的目的地路线，就像第一个例子那样去往下一个目的地。

感谢。

更新我找到了这个one（距离矩阵），但距离矩阵的问题是它没有返回详细的路线信息，比如DirectionsService，这就是我需要的。

Answer 1

我认为不可能同时渲染多个方向。我建了这样的东西，我一次只显示一个方向，但是当用户点击表格中的不同目的地时，我每次都更新了方向。

<!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>

Answer 2

我认为这应该是可能的。我不确定这是否是仪式方式，但对我来说，以下方式有效

location=[
        { b.lat: <lat of b> , b.lng: <lng of b> },
        { c.lat: <lat of c> , c.lng: <lng of c> },
        { d.lat: <lat of d> , d.lng: <lng of d> },
    ]
    location.forEach(function(value){
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(map);
        var request = {
            origin: new google.maps.LatLng(<lat of a>, <lng of a>),
            destination: new google.maps.LatLng(value.lat,value.lng),
            travelMode: "DRIVING",
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);  
            }
        });
    });

注意：我注意到，当在循环渲染之外移动时，方向服务和方向显示以及方向显示.setMap（地图）的声明不起作用，但评估者最终覆盖了现有的渲染。因此只有一个可见。

Google地图路线：包含多个目的地的单一来源

2 个答案: