1

地図上の 1 つのマーカーから 2 つ以上の別々のマーカーに至る複数の測地線を表示する Google マップを作成しようとしています。複数のマーカーをマップ上に配置できますが、マップ上の 1 つのマーカーから 2 つ以上のパスを作成する方法がわかりません。現在、このように表示されています

現在の地図

マップ用に編集したスクリプトは次のとおりです

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

  var geodesicPoly1;
  var geodesicPoly2;
  var marker1;
  var marker2;
  var marker3;

  function initialize() {
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(39.0997, -94.5786),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

    marker1 = new google.maps.Marker({
      map: map,
      draggable: false,
      position: new google.maps.LatLng(33.7490, -84.3880)
    });

    marker2 = new google.maps.Marker({
      map: map,
      draggable: false,
      position: new google.maps.LatLng(33.4484, -112.0740)
    });

    marker3 = new google.maps.Marker({
      map: map,
      draggable: false,
      position: new google.maps.LatLng(37.9577, -121.2908)
    });

    var geodesicOptions = {
      strokeColor: '#77bf44',
      strokeOpacity: 1.0,
      strokeWeight: 3,
      geodesic: true,
      map: map
    };

    geodesicPoly1 = new google.maps.Polyline(geodesicOptions);
    update();

    geodesicPoly2 = new google.maps.Polyline(geodesicOptions);
    update2();
  }


  function update() {
    var path = [marker1.getPosition(), marker2.getPosition()];
    geodesicPoly1.setPath(path);

    var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
    document.getElementById('heading').value = heading;
    document.getElementById('origin').value = path[0].toString();
    document.getElementById('destination').value = path[1].toString();
  }

  function update2() {
    var path = [marker1.getPosition(), marker3.getPosition()];
    geodesicPoly2.setPath(path);

    var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
    document.getElementId('heading').value = heading;
    document.getElementId('origin').value = path[0].toString();
    document.getElementId('destination').value = path[1].toString();
  }


  google.maps.event.addDomListener(window, 'load', initialize);

</script>
4

1 に答える 1

2

ポリラインは、2点間でのみ描画できます。複数のポリライン変数を作成する必要があります。 

<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
  <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
  <script type="text/javascript">

    var geodesicPoly1;
    var geodesicPoly2;
    var marker1;
    var marker2;
    var marker3;
    var heading = "cat";
    var map;

    function initialize()
    {
      var myOptions = {
        zoom: 4,
        center: new google.maps.LatLng(39.0997, -94.5786),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      map = new google.maps.Map(document.getElementById('map_canvas'),
          myOptions);

      marker1 = new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(33.7490, -84.3880)
      });

      marker2 = new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(33.4484, -112.0740)
      });

      marker3 = new google.maps.Marker({
        map: map,
        draggable: false,
        position: new google.maps.LatLng(37.9577, -121.2908)
      });

      var geodesicOptions = {
        strokeColor: '#77bf44',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        geodesic: true,
        map: map
      };
      geodesicPoly1 = new google.maps.Polyline(geodesicOptions);
      geodesicPoly2 = new google.maps.Polyline(geodesicOptions);

      update();
      update2();

    }

    function update() {
      var path = [marker1.getPosition(), marker2.getPosition()];

      geodesicPoly1.setPath(path);
      var heading = google.maps.geometry.spherical.computeHeading(path[0],
          path[1]);
      document.getElementById('heading').value = heading;
      document.getElementById('origin').value = path[0].toString();
      document.getElementById('destination').value = path[1].toString();
    }

    function update2() {
      var path2 = [marker1.getPosition(), marker3.getPosition()];

      geodesicPoly2.setPath(path2);
      var heading2 = google.maps.geometry.spherical.computeHeading(path2[0],
          path2[1]);
      document.getElementById('heading').value = heading;
      document.getElementById('origin').value = path2[0].toString();
      document.getElementById('destination').value = path2[1].toString();
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>
<body >
    <div id="map_canvas" style='height:500px; width:800px;'></div>
    <div id='heading'></div>
    <div id='origin'></div>
    <div id='destination'></div>
</body>
</html>

ここに画像の説明を入力してください

于 2012-05-30T13:48:33.727 に答える