删除previous折线谷歌地图 [英] Remove previous polyline Google Maps

问题描述

我绘制折线到谷歌地图不过我有难去除绘制的最后一行，如果用户犯了错误。

I am drawing a polyline onto a google map however I am having difficultly removing the last line drawn if the user makes a mistake.

在code我现在有划清界线是如下：

The code I currently have to draw the line is below:

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

  });

目前我可以明确使用code中的所有行

At the moment I can clear all the lines using the code

path.clear();

不过我在努力清除绘制的最后一行。

However I am struggling to clear the last line drawn.

推荐答案

米尔侯赛因沙基尔的回答实际上是正确的。我一直在寻找一个答案，他给了它。他的格式和解释是可怕的，但。以下是我已经做到了（完全code）：

Mir Shakeel Hussain's answer is actually correct. I was looking for an answer and he gave it. His formatting and explanation is awful though. Here's how I've done it (complete code):

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

这篇关于删除previous折线谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！