从 Google 地图中清除多段线,然后重新启动

Clear Polyline from Google Maps and then restart it

我正在玩 Google 地图 API v3 作为一个项目我 building.The 前提是用户可以在地图上绘制路线但是在任何时候都可以清除它并重新开始。我遇到的问题是在清除地图后重新启动折线。虽然标记出现,但折线没有出现。

我发现行 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);

要查看当前发生的情况,请查看以下内容 link:http://kitlocker.com/sotest.php

Polyline 只是 LatLng 对象的数组,而不是单独的 Polyline,然后您可以遍历它们以将其全部删除。

您可以像这样循环使其不可见或从地图中删除它:

var size = poly.length;

for (i=0; i<size; i++) 
{                           
  poly[i].setMap(null);
}

而不是 poly.setMap(null); 调用 path.clear();