8

私はGoogleマップを使用していますが、ある時点で少し行き詰まっています。出発地と目的地の代替ルートを表示したい。現在、私は完全に機能し、正しい結果を表示しているコードを使用していますが、唯一の問題は、このコードが開始パスと宛先パスの単一のルートのみを表示することです。

これが私のJSFIDDLE WORKING DEMOです

jsfiddleデモリンクで使用して いるサンプルコードは次のとおりです。

HTML コード: 

<h1>Calculate your route</h1>
<form id="calculate-route" name="calculate-route" action="#" method="get">
  <label for="from">From:</label>
  <input type="text" id="from" name="from" required="required" placeholder="An address" size="30" />
  <a id="from-link" href="#">Get my position</a>
  <br />

  <label for="to">To:</label>
  <input type="text" id="to" name="to" required="required" placeholder="Another address" size="30" />
  <a id="to-link" href="#">Get my position</a>
  <br />

  <input type="submit" />
  <input type="reset" />
</form>

JS コード: 

<script>
  function calculateRoute(from, to) {
    // Center initialized to Naples, Italy
    var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(40.84, 14.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // Draw the map
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

    var directionsService = new google.maps.DirectionsService();
    var directionsRequest = {
      origin: from,
      destination: to,
      provideRouteAlternatives: true,
      travelMode: google.maps.DirectionsTravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC
    };
    directionsService.route(
      directionsRequest,
      function(response, status)
      {
        if (status == google.maps.DirectionsStatus.OK)
        {
          new google.maps.DirectionsRenderer({
            map: mapObject,
            directions: response
          });
        }
        else
          $("#error").append("Unable to retrieve your route<br />");
      }
    );
  }

  $(document).ready(function() {
    // If the browser supports the Geolocation API
    if (typeof navigator.geolocation == "undefined") {
      $("#error").text("Your browser doesn't support the Geolocation API");
      return;
    }

    $("#from-link, #to-link").click(function(event) {
      event.preventDefault();
      var addressId = this.id.substring(0, this.id.indexOf("-"));

      navigator.geolocation.getCurrentPosition(function(position) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
        },
        function(results, status) {
          if (status == google.maps.GeocoderStatus.OK)
            $("#" + addressId).val(results[0].formatted_address);
          else
            $("#error").append("Unable to retrieve your address<br />");
        });
      },
      function(positionError){
        $("#error").append("Error: " + positionError.message + "<br />");
      },
      {
        enableHighAccuracy: true,
        timeout: 10 * 1000 // 10 seconds
      });
    });

    $("#calculate-route").submit(function(event) {
      event.preventDefault();
      calculateRoute($("#from").val(), $("#to").val());
    });
  });
</script>

デモで出発点と目的地を入力すると、それに応じて単一のルートが表示されますが、別のルートもマップに表示する必要があります。

「距離」または「交通量」に応じて、指定されたオプション間のルートを選択して表示する方法はありますか?

ご協力いただきありがとうございます。

4

1 に答える 1

35

あなたがする必要があるのは、応答オブジェクトを受け取るコールバック関数内で、directionService.route関数呼び出しによって返されるルートの数を確認することです。response.routesは配列になるため、それをループし、ループカウンターを使用してrouteIndexを設定しますDirectionsRenderer が使用するため。もちろん、私の意見では、この結果の出力はまったく望ましいものではありません。なぜなら、代替ルートのセグメントが重複することが非常に多いため、他の余分な行で何が起こっているのかがユーザーに常に視覚的に明らかであるとは限らないからです。テキストのルート案内を実際に表示する場合と同様に、ルート案内の各セットを表示するために異なる DOM 要素が必要になるため、どのセットが何のためのものなのかがわかりにくくなります。主な（最初の）ルートのみを表示し、クリックするとそれらのルートと方向のみが表示される代替を表示するボタンを用意することをお勧めします。とはいえ、ここにあなたの質問の修正があります：

directionsService.route(
    directionsRequest,
    function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            for (var i = 0, len = response.routes.length; i < len; i++) {
                new google.maps.DirectionsRenderer({
                    map: mapObject,
                    directions: response,
                    routeIndex: i
                });
            }
        } else {
            $("#error").append("Unable to retrieve your route<br />");
        }
    }
);
于 2013-09-24T07:42:29.977 に答える