Question

我正在绘制一条折线到谷歌地图上，但如果用户犯了错误，我很难删除最后一行。

我目前必须绘制的代码如下：

poly = new google.maps.Polyline({ map: map });
  google.maps.event.addListener(map, "click", function(evt) {

    if (path.getLength() === 0) {
    //Enters on first click

      path.push(evt.latLng);
      poly.setPath(path);
    } else {
    //Enters on second click
      service.route({
        origin: path.getAt(path.getLength() - 1),
        destination: evt.latLng,

        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          for (var i = 0, len = result.routes[0].overview_path.length;
              i < len; i++) {
            path.push(result.routes[0].overview_path[i]);

          }
        }
      });
    }


    var latitude_longitude = evt.latLng;
    var latitude = evt.latLng.lat();
    var longitude = evt.latLng.lng();



    ///Saves the first click location
if(count === 0){

        var latitude_start = evt.latLng.lat();
        var longitude_start = evt.latLng.lng();

        var firstlat = latitude_start;
        var firstlng = longitude_start;

    /////Trying to calculate distance
    var origin1 = new google.maps.LatLng(firstlat, firstlng);///1st click - never changes
    document.getElementById("origin1").value = origin1;
    document.getElementById("startpoint").value = origin1;

    ////Calculate distance
    var destinationA = new google.maps.LatLng(latitude, longitude); ///Most recent click
    document.getElementById("destination").value = destinationA; ////Stores Destination

    var origin1 = document.getElementsByName('origin1')[0].value ////Retrieves value from text box 


         count ++;
}else{

    var origin1 = document.getElementsByName('destination')[0].value ////Retrieves value from text box 

    ////Calculate distance
    var destinationA = new google.maps.LatLng(latitude, longitude); ///Most recent click
    document.getElementById("destination").value = destinationA; ////Stores Destination


}

                ////Calculate distance
                var servicetime = new google.maps.DistanceMatrixService();
                  servicetime.getDistanceMatrix(
                    {
                      origins: [origin1],
                      destinations: [destinationA],
                      travelMode: google.maps.TravelMode.DRIVING,
                      unitSystem: google.maps.UnitSystem.METRIC,

                    }, callback);

  });

目前我可以使用代码清除所有行

path.clear();

但是我正在努力清除最后一行。

Answer 1

Mir Shakeel Hussain的答案其实是正确的。我正在寻找答案，他给了它。他的格式和解释很糟糕。以下是我的完成方式（完整代码）：

 var map;
 var poly; //the line
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 52.092876, lng: 5.104480},
    zoom: 8
  });
}

$(document).ready(function () {
  $('#addLines').click(toggleLinesButton);
  $('#undoLine').click(undoPolyline);
});

var mayDrawLines = false;
function toggleLinesButton (el) {
  if (mayDrawLines) {
    mayDrawLines = false;
    $('#addLines').removeClass('active');
    removePoly();
  } else {
    mayDrawLines = true;
    $('#addLines').addClass('active');
    createPoly();
  }
}

var polyLineListener = null;
function createPoly () {
  if (!poly) {
    poly = new google.maps.Polyline({
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    poly.setMap(map);
  }


  // Add a listener for the click event
  polyLineListener = google.maps.event.addListener(map, 'click', addLatLng);
}

function removePoly () {
  google.maps.event.removeListener(polyLineListener);
  //poly = null;
  polyLineListener = null;
}

var polyIndex = 0;
//Mirrors the path array to find index to delete and such
var mirrorCoordinates = [];
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);
  mirrorCoordinates.push(event.latLng);

  polyIndex++;

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map,
    visible: false
  });

}

function undoPolyline() {
  mirrorCoordinates.pop();
  polyIndex--;
  poly.getPath().setAt(polyIndex, mirrorCoordinates[mirrorCoordinates.length - 1]);
  poly.getPath().removeAt(polyIndex);
}

Answer 2

以下可能有所帮助您可能需要使用数组来保存每个单击事件对象。然后你可以使用该数组删除元素并重新绘制新的ployline。

    google.maps.event.addListener(map, 'click', function(event) {
            newaddLatLng(event);
    });
function newaddLatLng(event) {
    path = newPol.getPath();
    path.push(event.latLng);
    newLat.push(event.latLng);
    indx++;
}

//删除代码

  newLat.pop();
    indx--;
    newPol.getPath().setAt(indx, newLat[newLat.length - 1]);
    newPol.getPath().removeAt(indx)

删除以前的折线谷歌地图

2 个答案: