Question

我正在使用下面的代码显示谷歌地图，我想在A到B之间隐藏折线.Google上的所有答案都谈到创建一个数组，然后执行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

如果要渲染路线但隐藏折线，请使用DirectionsRendererOptions suppressPolylines。

function initialize() {

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

Answer 2

如下面的演示所示，您可以通过两种方式删除折线：

在suppressPolylines中设置选项directionsDisplay为 true ，使用
设置google.maps.DirectionsRenderer
```
directionsDisplay.setOptions({
        suppressPolylines: true
      });
```
这将保留起点和终点标记。

方法setOptions(options:DirectionsRendererOptions)在初始化后更改DirectionsRenderer的选项设置。
使用directionsDisplay.setMap(null);删除所有路线渲染，但这包括标记，因此如果您这样做，则需要在地图上添加额外的标记。

＆＃13;

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

＆＃13;

#map {
  height: 280px;
}

＆＃13;

<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>

＆＃13;

Answer 3

如果你参考这个答案：Google Maps v3 directionsRenderer.setMap(null) not working to clear previous directions你应该看到你在寻找什么。

在实现directionsRenderer对象时，您不需要使用数组。如果你全局声明这个（编辑我现在已经看到你了）（这样你在任何给定的时间只有一个实例）那么你可以简单地使用directionsDisplay.setMap（null）来删除以前的方向渲染。

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

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

然后将其分配给渲染器：

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

在Google Map api v3中使用A到B隐藏折线

3 个答案: