javascript - 从 Google map 中清除折线，然后重新启动它

Question

我正在为我正在构建的项目使用 Google Maps API v3。前提是用户可以在 map 上绘制路线，但可以随时清除它并重新开始。我遇到的问题是在清除 map 后重新启动折线。虽然标记出现，但多段线没有出现。

我发现这条线 poly.setMap(null);只隐藏绘制的多段线而不清除它，因此不显示该线的原因是可以理解的。然而，在发现这一点后，我现在需要知道如何清除它以及如何重新启动它。

代码如下:

var poly;

var map, path = new google.maps.MVCArray(),
    service = new google.maps.DirectionsService(), poly;
var removepolyline;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];

var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
var count = 0;
var countname = 0;

var latitude_start;
var longitude_start;




function initialize() {
  var mapOptions = {
    zoom: 16,

  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  geocoder = new google.maps.Geocoder();
  ///Geolocation

    // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Current Location'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
    ///Place fallback loop
  }



  ///Allows the polyline to follow the road

  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();
    //alert(latitude_longitude);
    //alert(latitude);
//  alert(longitude);


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

  });


                function callback(response, status) {
                  if (status != google.maps.DistanceMatrixStatus.OK) {
                    alert('Error was: ' + status);
                  } else {

                    var origins = response.originAddresses;
                    ///Enters the if it is the first loop round/first click
                    if(countname === 0){
                        document.getElementById("startpointname").value = origins;
                        countname ++;
                    }
                    var destinations = response.destinationAddresses;


                    var outputDiv = document.getElementById('outputDiv');

                    outputDiv.innerHTML = '';

                    //deleteOverlays(); ////
                    for (var i = 0; i < origins.length; i++) {


                      var results = response.rows[i].elements;
                      //addMarker(origins[i], false);

                      for (var j = 0; j < results.length; j++) {

                        outputDiv.innerHTML += start + ' to ' + destinations[j]
                            + ': ' + miles + ' miles in '
                            + overalltime + ' minutes <br>';

                      }
                    }
                  }
                }



  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', addLatLng);
}////Function initialize ends here



function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}




/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * @param {google.maps.MouseEvent} event
 */

function addLatLng(event) {

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

  });

  markersArray.push(marker);

}///Function addLatLng ends here



// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {

for (var i = 0; i < markersArray.length; i++) {
                    markersArray[i].setMap(null);
                  }

}


function clearall() {

    poly.setMap(null);//Just hiding them

      clearMarkers();
      markersArray = [];
 ///////////////////CLEAR ALL VALUES IN HERE i.e. miles, time etc and CLEAR MARKERS

     restartpolyline();

}


//////////////////////////////////////////WHEN CLEARED THE CODE NEEDS INTITALISING AGAIN
function  restartpolyline(){
//alert("Restart");



}

//https://developers.google.com/maps/documentation/javascript/reference#Polyline

google.maps.event.addDomListener(window, 'load', initialize);

要查看当前发生的情况，请查看以下链接:http://kitlocker.com/sotest.php

Answer 1

代替 poly.setMap(null); 调用 path.clear();