Question

我正在尝试创建一个Google地图，该地图会在地图上显示源自一个标记的多个测地线到两个或多个单独的标记。我能够在地图上放置我的多个标记，但是我在确定如何从地图上的一个标记获得2条或更多条路径时遇到了问题。目前这就是它的显示方式

Current Map

这是我编辑的地图脚本

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

Answer 1

折线只能在两点之间绘制。您需要创建多个Polyline变量。

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

enter image description here

谷歌从一个标记映射多个测地路径

1 个答案: