1

Bom dia pessoal, preciso que o código abaixo alem de desenhar as linhas no mapa, remova as linhas desenhadas anteriormente, mas não estou conseguindo, alguém poderia me dar uma ajuda?

Segue imagem com resultado do código atual

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://code.angularjs.org/1.2.12/angular.min.js.map"></script>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MINHAAPI"></script>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

  <style type="text/css" media="screen">
    #map {
      position:absolute;
      top: 0; bottom: 0; left: 0; right: 0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script type="text/javascript">

$(document).ready(function(){
  var MAP_ZOOM = 15
  var MARKER_SIZE = 60
  
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: MAP_ZOOM,
      center: {lat: -12.17011059, lng: -44.8119901,},
      mapTypeId: 'satellite'
    });
    
  var markers = [];
  
  
  
  window.onmessage = function(evt){
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    
          
    
     var latlng = JSON.parse(evt.data);
        var array = $.map(latlng, function(el) {
  			return [[el.lat, el.lng]];
			});
    
    var data = JSON.parse(evt.data);
    
    map.setZoom(MAP_ZOOM);
    map.setCenter({lat:latlng[0].lat,lng:latlng[0].lng});

      markers = data.map(function(el, i) {
         
      var marker = new google.maps.Marker({
        position: el,
        icon: {
          url: el.iconUrl,
          scaledSize: new google.maps.Size(MARKER_SIZE, MARKER_SIZE)
        },
        map:map
      });
  
  
        if (i > 0) { // move this inside the marker creation loop
         var sitepath = new google.maps.Polyline({
                // use the markers in for the coordinates
                path: latlng,
                geodesic: false,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2,
                map: map
              });
             }
    
      
      google.maps.event.addListener(marker , 'click', function(){
        var infowindow = new google.maps.InfoWindow({
          content:el.description,
          position: el,
          maxWidth: 200,
        });
        infowindow.open(map);
        setTimeout(function () { infowindow.close(); }, 120000);
      });
      return marker
      
    });
  }
});
  </script>
</body>
</html>

Resultado do código atual

3 Respostas 3

0

Jeferson, tente utilizar um botão para que quando o mesmo for acionado, você fazer a remoção dos polyLine. Caso der certo, você pode seguir um exemplo disso para prosseguir da forma que você achar melhor.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://code.angularjs.org/1.2.12/angular.min.js.map"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=key"></script>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

   <style type="text/css" media="screen">
    #map {
      position:absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      height: 80%;
    }
    #remove{
    z-index: 99999999;
    margin-top: 700px;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <button id="remove">Remover Polyline</button>

  <script type="text/javascript">
$(document).ready(function(){
  var MAP_ZOOM = 15
  var MARKER_SIZE = 60

  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: MAP_ZOOM,
      center: {lat: -12.17011059, lng: -44.8119901,},
      mapTypeId: 'satellite'
    });

  var markers = [];
  var listPolyLines= [];


  window.onmessage = function(evt){
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }          

     var latlng = JSON.parse(evt.data);
        var array = $.map(latlng, function(el) {
            return [[el.lat, el.lng, el.color]];
            });

    var data = JSON.parse(evt.data);

    map.setZoom(MAP_ZOOM);
    map.setCenter({lat:latlng[0].lat,lng:latlng[0].lng});

      markers = data.map(function(el, i) {

      var marker = new google.maps.Marker({
        position: el,
        icon: {
          url: el.iconUrl,
          scaledSize: new google.maps.Size(MARKER_SIZE, MARKER_SIZE)
        },
        map:map
      });


        if (i > 0) { // move this inside the marker creation loop
         var sitepath = new google.maps.Polyline({
                // use the markers in for the coordinates
                path: latlng,
                geodesic: false,
                strokeOpacity: 1.0,
                strokeColor : "red",
                strokeWeight: 2,
                map: map
              });
              listPolyLines.push(sitepath);
             }


      google.maps.event.addListener(marker , 'click', function(){
        var infowindow = new google.maps.InfoWindow({
          content:el.description,
          position: el,
          maxWidth: 200,
        });
        infowindow.open(map);
        setTimeout(function () { infowindow.close(); }, 120000);
      });
      return marker


    });
  }

  $('#remove').click( function(){
      for(let i = 0; i<listPolyLines.length; i++){
      listPolyLines[i].setMap(null);
      listPolyLines.splice(i);
    }
  });

});
  </script>
</body>
</html>
0

[EDITADO] Tudo bem? Você pode utilizar o setMap(null), por exemplo, você pode percorrer uma lista de Polylines e ir setando as mesmas com o método acima. Lembre-se de retirar o elemento do array após ser setado como null.

Ex:

for(let i = 0; i<listPolyLines.length; i++){
  listPolyLines[i].setMap(null);
  listPolyLines.splice(i);

}

Porém, considerando seu código atual, primeiramente você deve declarar o array:

 var listPolyLines= [];

Sempre que você criar seu sitepath, que é seu Polyline, logo abaixo você deve dar um push na sua lista, ou seja, adiciona-lo como um elemento.

listPolyLines.push(sitepath);

Creio ter lhe ajudado na sua dúvida, caso ainda tenha algum tipo de problema, por favor me diga para continuar lhe ajudando.

3
  • Bom, sou novato em Javascript e HTML entendo apenas o básico, Fiz as alterações no código mas não sei se alterei da maneira correta, acredito que não pois continua igual ... 25/03/2019 às 17:49
  • Por favor, me mande seu código da forma que você alterou, dessa forma consigo lhe ajudar melhor 25/03/2019 às 19:34
  • não coube todo o código na resposta, segue código em outra resposta 25/03/2019 às 19:52
0

Luis Faconi, não coube todo o código na resposta, segue código abaixo:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://code.angularjs.org/1.2.12/angular.min.js.map"></script>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=minhaapi"></script>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

  <style type="text/css" media="screen">
    #map {
      position:absolute;
      top: 0; bottom: 0; left: 0; right: 0;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script type="text/javascript">

$(document).ready(function(){
  var MAP_ZOOM = 15
  var MARKER_SIZE = 60
  
  var map = new google.maps.Map(document.getElementById('map'), {
      zoom: MAP_ZOOM,
      center: {lat: -12.17011059, lng: -44.8119901,},
      mapTypeId: 'satellite'
    });
    
  var markers = [];
  var listPolyLines= [];
  
  
  window.onmessage = function(evt){
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
    for(let i = 0; i<listPolyLines.length; i++){
      listPolyLines[i].setMap(null);
      listPolyLines.splice(i);
    }
    
          
    
     var latlng = JSON.parse(evt.data);
        var array = $.map(latlng, function(el) {
  			return [[el.lat, el.lng, el.color]];
			});
    
    var data = JSON.parse(evt.data);
    
    map.setZoom(MAP_ZOOM);
    map.setCenter({lat:latlng[0].lat,lng:latlng[0].lng});

      markers = data.map(function(el, i) {
         
      var marker = new google.maps.Marker({
        position: el,
        icon: {
          url: el.iconUrl,
          scaledSize: new google.maps.Size(MARKER_SIZE, MARKER_SIZE)
        },
        map:map
      });
  
  
        if (i > 0) { // move this inside the marker creation loop
         var sitepath = new google.maps.Polyline({
                // use the markers in for the coordinates
                path: latlng,
                geodesic: false,
                strokeOpacity: 1.0,
                strokeColor : "red",
                strokeWeight: 2,
                map: map
              });
              listPolyLines.push(sitepath);
             }
    
      
      google.maps.event.addListener(marker , 'click', function(){
        var infowindow = new google.maps.InfoWindow({
          content:el.description,
          position: el,
          maxWidth: 200,
        });
        infowindow.open(map);
        setTimeout(function () { infowindow.close(); }, 120000);
      });
      return marker


    });
  }
});
  </script>
</body>
</html>

Obrigado pela atenção

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .