Javascript：在谷歌地图中添加和删除折线？

Question

我正在尝试在谷歌地图上的两个位置之间添加折线。

其中 1 个位置是静态的（始终相同），另一个是动态的，通过 AJAX 每 X 秒刷新一次。

现在，我需要在地图上的这两点之间添加一条折线。

我可以添加折线，但它不会被删除或刷新。

这是一个有效的FIDDLE

还有我的代码：

var map;


         function initialize()
         {

            var input = $('#input').val();
           var input2 = $('#input2').val();

var line = new google.maps.Polyline({
    path: [new google.maps.LatLng(24.71237, 72.90634), new google.maps.LatLng(input, input2)],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
    map: map
});


           var latlng = new google.maps.LatLng(21.16536,72.79387);



           var myOptions = {
               zoom: 5,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
           };


           map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
           var marker = new google.maps.Marker
           (
               {
                   position: new google.maps.LatLng(21.1673643, 72.7851802),
                   map: map,
                   title: 'Click me'
               }

           );




           var infowindow = new google.maps.InfoWindow({
               content: 'Location info:<br/>SVNIT Post Office, Dumas Rd, Surat<br/>LatLng:<br/>21.1673643, 72.7851802'
           });
           google.maps.event.addListener(marker, 'click', function ()
           {
              infowindow.open(map, marker);
              setTimeout(function(){infowindow.close();}, '5000');
           });

       //$('#clickme').on('click', function(){
       setInterval(function() {
           var input = $('#input').val();
           var input2 = $('#input2').val();


            var NewLatLng = new google.maps.LatLng(input, input2);
            //setInterval(function() { marker.setPosition(NewLatLng);}, 2000);

            marker.setPosition( NewLatLng );
            line.setMap(map);
    }); 





       }





       window.onload = initialize;

有人可以就这个问题提出建议吗？

我确实尝试添加line.setMap(null);，但这并没有做任何事情。

Answer 1

标记位置更新时需要更新折线的路径（或将路径的顶点绑定到标记上）。

setInterval(function() {
  var input = $('#input').val();
  var input2 = $('#input2').val();

  var NewLatLng = new google.maps.LatLng(input, input2);

  marker.setPosition(NewLatLng);
  line.setPath([new google.maps.LatLng(24.71237, 72.90634), NewLatLng]);
  line.setMap(map);
});

proof of concept fiddle

代码 sn-p：

var map;
function initialize() {
  var input = $('#input').val();
  var input2 = $('#input2').val();

  var line = new google.maps.Polyline({
    path: [new google.maps.LatLng(24.71237, 72.90634), new google.maps.LatLng(input, input2)],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
    map: map
  });

  var latlng = new google.maps.LatLng(21.16536, 72.79387);
  var myOptions = {
    zoom: 5,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(21.1673643, 72.7851802),
      map: map,
      title: 'Click me'
    }
  );

  var infowindow = new google.maps.InfoWindow({
    content: 'Location info:<br/>SVNIT Post Office, Dumas Rd, Surat<br/>LatLng:<br/>21.1673643, 72.7851802'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
    setTimeout(function() {
      infowindow.close();
    }, '5000');
  });

  setInterval(function() {
    var input = $('#input').val();
    var input2 = $('#input2').val();

    var NewLatLng = new google.maps.LatLng(input, input2);

    marker.setPosition(NewLatLng);
    line.setPath([new google.maps.LatLng(24.71237, 72.90634), NewLatLng]);
    line.setMap(map);
  });
}
window.onload = initialize;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="input" value="24" />
<input id="input2" value ="72" />
<div id="map_canvas"></div>

Answer 2

更新标记时，您需要更改折线对象的路径。