So entfernen Sie bestimmte Pfad von Google Map mit jquery

Question

Ich habe eine Google-Karte, auf der ich mehrere Pfade mit verschiedenen Liste von Datenpunkten zeichnen. Angenommen, nach dem Erstellen einer Route in Google Maps muss diese Route unter mehreren Routen entfernt werden. Ich habe die Lösung mit Setmap(null) Methode gesehen, aber es wird alle Route löschen. Unten sind verschiedene Datenquellen und ich verwende DrawRoute Methode durch die Weitergabe einzelner Quellen. Jetzt muss ich DataSource1 Route entfernen.

var dataSource1 = [{ 
    "title": 'Duero', 
    "lat": '40.480243', 
    "lng": '-3.866172', 
    "description": 'This is Duero' 
}, { 
    "title": 'Reyes Catolicos', 
    "lat": '40.47806', 
    "lng": '-3.870937', 
    "description": 'This is Reyes Catolicos' 
}, { 
    "title": 'Guadarrama', 
    "lat": '40.478998', 
    "lng": '-3.878755', 
    "description": 'This is Guadarrama' 
}]; 

var dataSource2 = [{ 
    "title": 'Duero', 
    "lat": '40.460243', 
    "lng": '-3.866172', 
    "description": 'This is Duero' 
}, { 
    "title": 'Reyes Catolicos', 
    "lat": '40.45806', 
    "lng": '-3.870937', 
    "description": 'This is Reyes Catolicos' 
}, { 
    "title": 'Guadarrama', 
    "lat": '40.438998', 
    "lng": '-3.878755', 
    "description": 'This is Guadarrama' 
}]; 


function DrawRoute(routeData, pathColor) 
{ 
    for (var i = 0; i < routeData.length; i++) { 
     if ((i + 1) < routeData.length) { 
      var src = new google.maps.LatLng(parseFloat(routeData[i].lat), 
       parseFloat(routeData[i].lng)); 
      createMarker(src); 

      var des = new google.maps.LatLng(parseFloat(routeData[i + 1].lat), 
       parseFloat(routeData[i + 1].lng)); 
      createMarker(des); 
      // poly.setPath(path); 
      service.route({ 
       origin: src, 
       destination: des, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }, function (result, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        var path = new google.maps.MVCArray(); 
        var poly = new google.maps.Polyline({ 
         map: map, 
         strokeColor: pathColor 
        }); 
        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
         path.push(result.routes[0].overview_path[i]); 
        } 
        poly.setPath(path); 
        map.fitBounds(bounds); 
       } 
      }); 
     } 
    } 

Answer 1

Eine Möglichkeit wäre Verweise auf die Polylinien zu halten, diese Referenzen verwenden zu verstecken/show/Drücken Sie die Polylinien.

proof of concept fiddle

Code-Schnipsel:

function DrawRoute(routeData, pathColor) { 
 
    for (var i = 0; i < routeData.length; i++) { 
 
    if ((i + 1) < routeData.length) { 
 
     var src = new google.maps.LatLng(parseFloat(routeData[i].lat), 
 
     parseFloat(routeData[i].lng)); 
 
     var des = new google.maps.LatLng(parseFloat(routeData[i + 1].lat), 
 
     parseFloat(routeData[i + 1].lng)); 
 
     service.route({ 
 
     origin: src, 
 
     destination: des, 
 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
     }, function(result, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
      var path = new google.maps.MVCArray(); 
 
      var poly = new google.maps.Polyline({ 
 
      map: map, 
 
      strokeColor: pathColor 
 
      }); 
 
      for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
 
      path.push(result.routes[0].overview_path[i]); 
 
      bounds.extend(result.routes[0].overview_path[i]); 
 
      } 
 
      poly.setPath(path); 
 
      // keep reference to polyline in global polylines array 
 
      polylines.push(poly); 
 
      map.fitBounds(bounds); 
 
     } 
 
     }); 
 
    } 
 
    } 
 
} 
 

 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    DrawRoute(dataSource1, "#ff0000"); 
 
    DrawRoute(dataSource2, "#0000ff"); 
 

 
    // toggle the polylines when the associated button is clicked 
 
    var routeBtns = document.getElementsByClassName("rtbtn") 
 
    for (var i = 0; i < routeBtns.length; i++) { 
 
    google.maps.event.addDomListener(routeBtns[i], 'click', (function(i) { 
 
     return function() { 
 
     if (polylines[i].getMap()) { 
 
      polylines[i].setMap(null); 
 
     } else { 
 
      polylines[i].setMap(map); 
 
     } 
 
     } 
 
    })(i)) 
 
    } 
 
} 
 

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

 
// global variables 
 
var geocoder; 
 
var map; 
 
var polylines = []; 
 
var bounds = new google.maps.LatLngBounds(); 
 
var service = new google.maps.DirectionsService(); 
 
var dataSource1 = [{ 
 
    "title": 'Duero', 
 
    "lat": '40.480243', 
 
    "lng": '-3.866172', 
 
    "description": 'This is Duero' 
 
}, { 
 
    "title": 'Reyes Catolicos', 
 
    "lat": '40.47806', 
 
    "lng": '-3.870937', 
 
    "description": 'This is Reyes Catolicos' 
 
}, { 
 
    "title": 'Guadarrama', 
 
    "lat": '40.478998', 
 
    "lng": '-3.878755', 
 
    "description": 'This is Guadarrama' 
 
}]; 
 

 
var dataSource2 = [{ 
 
    "title": 'Duero', 
 
    "lat": '40.460243', 
 
    "lng": '-3.866172', 
 
    "description": 'This is Duero' 
 
}, { 
 
    "title": 'Reyes Catolicos', 
 
    "lat": '40.45806', 
 
    "lng": '-3.870937', 
 
    "description": 'This is Reyes Catolicos' 
 
}, { 
 
    "title": 'Guadarrama', 
 
    "lat": '40.438998', 
 
    "lng": '-3.878755', 
 
    "description": 'This is Guadarrama' 
 
}];

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input class="rtbtn" id="route0" type="button" value="Rt0" /> 
 
<input class="rtbtn" id="route1" type="button" value="Rt1" /> 
 
<input class="rtbtn" id="route2" type="button" value="Rt2" /> 
 
<input class="rtbtn" id="route3" type="button" value="Rt3" /> 
 
<div id="map_canvas"></div>