从谷歌地图中删除折线[重复]答案

【问题标题】：Removing polylines from google maps [duplicate]从谷歌地图中删除折线[重复]
【发布时间】：2011-01-28 21:00:40
【问题描述】：

我正在使用 DirectionsRenderer 来显示路径，但在我完成之后我想移除折线并继续进行操作。我似乎无法控制此函数创建的标记和折线。

有没有人知道如何删除这样的折线，如果不可能的话，还有其他建议吗？

我现在可以使用抑制属性，但由于我在第一阶段使用折线，这并不能真正解决任何问题。

非常沮丧.. 干杯！

【问题讨论】：

标签： javascript google-maps-api-3 polyline

【解决方案1】：

这是您问题的解决方案：使用 suppressPolylines 选项或从地图中删除渲染器

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;

var pointA = new google.maps.LatLng(48.86, 2.35);
var pointB = new google.maps.LatLng(33.7167, 73.0667);

function initialize() {

  var rendererOptions = {
      map: map,
      draggable: true
    }
    // Instantiate a directions service.
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  // Create a map and center it on islamabad.
  var islamabad = new google.maps.LatLng(33.7167, 73.0667);
  var mapOptions = {
    zoom: 13,
    center: islamabad
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute();
}

function calcRoute() {
  var start = pointA;
  var end = pointB;
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
};

function removeRoute() {
  directionsDisplay.setOptions({
    suppressPolylines: true
  });
  // this "refreshes" the renderer
  directionsDisplay.setMap(map);
};

function removeRouteNull() {
  directionsDisplay.setMap(null);
};
google.maps.event.addDomListener(window, 'load', initialize);

#map {
  height: 280px;
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<button onclick="removeRoute()">Remove route (suppressPolylines)</button>
<button onclick="removeRouteNull()">Remove route (setMap(null))</button>
<button onclick="initialize()">Undo all</button>
<section id="map"></section>

【讨论】：

【解决方案2】：

这是从谷歌地图 v3 中删除折线的方法。希望它可以帮助你。

var line = [];
 var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates, //create an array of LatLng objects
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
 line.push(flightPath);

现在您将所有折线对象推入数组线。您可以通过像这样循环使其不可见或将其从地图中删除：

for (i=0; i<line.length; i++) 
{                           
  line[i].setMap(null); //or line[i].setVisible(false);
}

【讨论】：

【解决方案3】：

使用

[self.polyline setMap:nil];

【讨论】：