使用 Google Map api v3 隐藏从 A 到 B 的折线

Question

我正在用下面的代码显示谷歌地图，我想隐藏 A 到 B 之间的折线。谷歌上的所有答案都是关于创建一个数组然后执行array.setmap(null)。我可以在不使用数组的情况下隐藏折线吗？在其他情况下，我应该如何使用数组来使用下面的代码隐藏折线。

编辑：我需要显示标记 A 和 B

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;    
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 = document.getElementById('MainContent_txtFrom').value;
        var end = document.getElementById('MainContent_txtTo').value;
        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);
            }
        });
    }      
    google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

如下面的demo所示，可以通过两种方式去除折线：

• 将directionsDisplay 中的选项suppressPolylines 设置为true，使用您的google.maps.DirectionsRenderer

  directionsDisplay.setOptions({
          suppressPolylines: true
        });
  

  这将保留起点和终点标记。

  方法setOptions(options:DirectionsRendererOptions)在初始化后改变DirectionsRenderer的选项设置。

• 使用directionsDisplay.setMap(null); 删除所有方向渲染，但这包括标记，因此如果您这样做，则需要向地图添加额外的标记。

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>

Answer 2

如果您想渲染方向但隐藏折线，请使用DirectionsRendererOptions suppressPolylines。

function initialize() {

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

Answer 3

如果您参考此答案：Google Maps v3 directionsRenderer.setMap(null) not working to clear previous directions，您应该会看到您要查找的内容。

在实现方向渲染器对象时，您不需要使用数组。如果您在全局范围内声明（Edit 我现在看到您已经这样做了）（这样您在任何给定时间都只有一个实例），那么您可以简单地使用 commandsDisplay.setMap(null) 删除以前的路线呈现。

如果您想从响应中渲染标记但隐藏折线，我想最简单（但我想绝不是最干净）的方法是简单地改变折线对象的不透明度：

var myPolylineOptions = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0.00001,
    strokeWeight: 0
});

然后将其分配给您的渲染器：

directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: myPolylineOptions});