Klar Polylinie aus Google Maps und starten Sie ihn anschließend neu

Ich bin Herumspielen mit der Google Maps API v3 für ein Projekt, das ich bin Gebäude.Die Prämisse ist, kann der Benutzer zeichnen Sie eine route auf der Karte jedoch an jedem Punkt können Sie es löschen und erneut zu starten. Das Problem, das ich habe ist ein Neustart der Polylinie, die nach der Karte gelöscht wurde. Während die Marker angezeigt, die Polylinie nicht.

Habe ich entdeckt, dass die Linie poly.setMap(null); nur versteckt Polylinie zeichnen und gar nicht klar, daher ist es verständlich, warum die Zeile nicht zeigen. Jedoch auf der Suche nach diesem ich jetzt zu wissen, wie klar und wie es neu gestartet werden kann.

Den code ist unten:

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

Sehen, was derzeit geschieht folgenden link: http://kitlocker.com/sotest.php

InformationsquelleAutor Chris | 2015-01-22
Schreibe einen Kommentar