如何使用 jquery 从谷歌地图中删除特定路径

Question

我有一个谷歌地图，我在上面使用不同的数据点列表绘制了多条路径。假设在谷歌地图上创建路线后，我需要在多条路线中删除该特定路线。我已经看到了使用Setmap(null) 方法的解决方案，但它会清除所有路线。下面是不同的数据源，我通过传递单个源来使用DrawRoute 方法。现在我需要删除 DataSource1 路由。

 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

一种选择是保留对折线的引用，使用这些引用来隐藏/显示/切换折线。

proof of concept fiddle

代码 sn-p：

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>