Question

我对Polylines google map api v3有疑问。

我点击链接时绘制折线，因为我使用相同的链接删除或隐藏折线？

我的代码：

HTML

<a href="mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino);">MI ruta</a>

的javascript

function mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino) {

    var start = new google.maps.LatLng(ltOrigen, lgOrigen);
    var end = new google.maps.LatLng(ltDestino, lgDestino);

    var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
    directionsDisplay.setMap(map); // map should be already initialized.

    var request = {
        origin : start,
        destination : end,
        travelMode : google.maps.TravelMode.DRIVING
    };
    var directionsService = new google.maps.DirectionsService(); 
          //var bounds = new google.maps.LatLngBounds();

    directionsService.route(request, function(response, status) {
        /*if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }*/
        if (status == google.maps.DirectionsStatus.OK) {
                                        var path = new google.maps.MVCArray();
                                        var poly = new google.maps.Polyline({
                                            map: map,
                                            strokeColor: '#F3443C'
                                        });
                                        for (var i = 0, len = response.routes[0].overview_path.length; i < len; i++) {
                                            path.push(response.routes[0].overview_path[i]);
                                        }
                                        poly.setPath(path);
                                        //map.fitBounds(bounds);
                                    }
    });
}

Answer 1

您需要在全局范围内保留对折线的引用。如果已经创建了它，请将其从地图中删除（如果您希望在没有显示链接时单击链接，可以通过将其重新添加到地图来切换它。

proof of concept fiddle

代码段

＆＃13;

var geocoder;
var map;
var poly;
var ltOrigen = 40.7127837,
  lgOrigen = -74.0059413,
  ltDestino = 40.735657,
  lgDestino = -74.1723667;

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
    });;
}

function mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino) {
  if (poly && poly.setMap && poly.getMap && (poly.getMap() != null)) {
    poly.setMap(null);
    return;
  }
  var start = new google.maps.LatLng(ltOrigen, lgOrigen);
  var end = new google.maps.LatLng(ltDestino, lgDestino);

  var directionsDisplay = new google.maps.DirectionsRenderer(); // also, constructor can get "DirectionsRendererOptions" object
  directionsDisplay.setMap(map); // map should be already initialized.

  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  var directionsService = new google.maps.DirectionsService();
  //var bounds = new google.maps.LatLngBounds();

  directionsService.route(request, function(response, status) {
    /*if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }*/
    if (status == google.maps.DirectionsStatus.OK) {
      var path = new google.maps.MVCArray();
      poly = new google.maps.Polyline({
        map: map,
        strokeColor: '#F3443C'
      });
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0, len = response.routes[0].overview_path.length; i < len; i++) {
        path.push(response.routes[0].overview_path[i]);
        bounds.extend(response.routes[0].overview_path[i]);
      }
      poly.setPath(path);
      map.fitBounds(bounds);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<a href="javascript:mostrarRuta(ltOrigen, lgOrigen, ltDestino, lgDestino);">MI ruta</a>
<div id="map_canvas"></div>

＆＃13;

删除具有相同链接的折线

1 个答案: