如何從谷歌地圖使用jquery刪除特定路徑

我有一個谷歌地圖，我使用不同的數據點列表繪製多個路徑。假設在谷歌地圖上創建路線後，我需要刪除多條路線中的特定路線。我已經看到使用Setmap(null)方法的解決方案，但它會清除所有路由。下面是不同的數據來源，我使用DrawRoute方法通過傳遞個別來源。現在我需要刪除DataSource1路由。如何從谷歌地圖使用jquery刪除特定路徑

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); 
       } 
      }); 
     } 
    }

來源

2016-04-21 user1770461

請提供[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/ mcve），演示您正在嘗試執行的操作，包括一些示例/測試數據。你打算如何去除路線？ – geocodezip

在我看來像poly.setMap（null）將只清除最後一個路徑。 – geocodezip

我已經更新了我的問題。請看看，並建議我將通過一個數據源，並應該刪除 – user1770461

一種選擇是保留對摺線引用，使用這些引用隱藏/顯示/切換折線。

proof of concept fiddle

代碼片斷：

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>

來源

2016-04-21 05:34:36 geocodezip

非常感謝。它正在工作 – user1770461

如何從谷歌地圖使用jquery刪除特定路徑

回答

相關問題