9

V2 または V3 (できれば 3) を使用して、ある意味で建物を無視するパスを作成できる必要があります。

kml ファイルを作成してすべてのパスを自分で作成し、必要に応じてそれらをオン/オフする方法を見つけようとしていました。

例えば。ユーザーは地点 A から地点 B に行きたいと考えています。これらの地点の間には多くの建物があります。ユーザーはこれらの建物 (キャンパス) を物理的に歩くことができます。それを地図で示したい。

この方法では、駐車場の反対側にたどり着くためだけに、たとえば駐車場を一周する必要はありません。

これを行う方法がまったくない場合は、知りたいです。

私が必要とするものの例はここにあります: http://www.uottawa.ca/maps/

これはすべて、ユーザーからドロップダウン メニューへの 2 つの入力に基づいて事前に決定されたパスです。これははっきりとわかります。しかし、a) これが v3 で実行できるかどうか、b) いったいどうやって自分たちでそれを行ったのか、私にはわかりません。

支援が必要です。大歓迎です!

4

2 に答える 2

6

キャンパスがそれほど大きくない場合は、順列ごとにすべてのポリラインルートを手動で定義することを検討してください。たとえば、建物A、B、C、Dが4つある場合は、6つのルートを定義する必要があります。

A:B, A:C, A:D, B:C, B:D, C:D

次に、基本的なJavaScriptロジックを作成します。開始点として建物Aを選択し、目的地として建物Cを選択した場合、すべてのポリラインを非表示にし、A：C行のみを表示します。必要に応じて、 Googleのポリラインメソッドを使用して、各ルートの長さをメートル単位で取得することもできます。

これは、所有している建物の数に応じて、定義する必要のあるルートの数の短い表です。

+-------------+--------+
|  Buildings  | Routes |
|-------------+--------+
|         5   |    10  |
|        10   |    45  |
|        15   |   105  |
|        20   |   190  |
|        25   |   300  |
+-------------+--------+

ご覧のように、建物の数が増えると本当に手に負えなくなるので、このオプションはある程度までしか実現できないと思います。人々が各ルートを両方向に歩くことができると仮定すると、順列の順序は重要ではないので、少なくともあなたは幸運です。

興味深いメモ：あなたが提供したオタワのデモは、道順を要求するときにAJAX呼び出しを行っていないことに気づきました。したがって、彼らが上記と同じことをしている可能性が高いです。

アップデート：

これは、 v3MapsAPIを使用した作業デモです。これが開始に役立つことを願っています。

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps Campus</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
  <div id="map" style="width: 550px; height: 400px"></div> 

  <div>Start: 
    <select id="start">
      <option>Building 1</option>
      <option>Building 2</option>
      <option>Building 3</option>
    </select>
  </div>

  <div>End: 
    <select id="end">
      <option>Building 1</option>
      <option>Building 2</option>
      <option>Building 3</option>
    </select>
  </div>

  <input type="button" onclick="drawDirections();" value="GO" />

  <script type="text/javascript"> 
    var mapOptions = { 
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      center: new google.maps.LatLng(47.690, -122.310),
      zoom: 12
    };

    var map = new google.maps.Map(document.getElementById("map"), 
                                  mapOptions);

    // Predefine all the paths
    var paths = [];                         

    paths['1_to_2'] = new google.maps.Polyline({
      path: [
          new google.maps.LatLng(47.656, -122.360),
          new google.maps.LatLng(47.656, -122.343),
          new google.maps.LatLng(47.690, -122.310)
      ], strokeColor: '#FF0000'
    });

    paths['1_to_3'] = new google.maps.Polyline({
       path: [
          new google.maps.LatLng(47.656, -122.360),
          new google.maps.LatLng(47.656, -122.343),
          new google.maps.LatLng(47.690, -122.270)
       ], strokeColor: '#FF0000'
    });

    paths['2_to_3'] = new google.maps.Polyline({
       path: [
           new google.maps.LatLng(47.690, -122.310),
           new google.maps.LatLng(47.690, -122.270)
       ], strokeColor: '#FF0000'
    });

    function drawDirections() {
      var start = 1 + document.getElementById('start').selectedIndex;
      var end = 1 + document.getElementById('end').selectedIndex;
      var i;

      if (start === end) {
        alert('Please choose different buildings');
      }
      else {
        // Hide all polylines
        for (i in paths) {
          paths[i].setOptions({ map: null });
        }

        // Show the route
        if (typeof paths['' + start + '_to_' + end] !== 'undefined') {
          paths['' + start + '_to_' + end].setOptions({ map: map });
        }
        else if (typeof paths['' + end + '_to_' + start] !== 'undefined') {
          paths['' + end + '_to_' + start].setOptions({ map: map });
        }
      }
    }
  </script> 
</body> 
</html>

スクリーンショット：

Googleマップキャンパス

于 2010-04-30T05:32:19.767 に答える
1

「カラスが飛ぶように」表示するポリラインを追加できないのはなぜですか?

于 2010-04-30T03:11:20.570 に答える