从谷歌地图清晰折线，然后重新启动 [英] Clear Polyline from Google Maps and then restart it

问题描述

我玩弄与项目的谷歌地图API V3我楼房，premise是用户可以在任何点在地图上画一个路线但可以清除它，并重新开始。我有正在重新启动地图后折线的问题已被清除。虽然标记出现在折线没有。

I am playing around with the Google Maps API v3 for a project I am building.The premise is the user can draw a route on the map however at any point can clear it and start again. The issue I am having is restarting the polyline after the map has been cleared. Whilst the markers appear the polyline does not.

我们已经发现，线poly.setMap（空）;只有隐藏折线就是借鉴并不会因此清除它这是可以理解为什么该行不显示。但是在发现了这一点，我现在需要知道如何清除它，以及它如何被重新启动。

I have discovered that the line poly.setMap(null); only hides the polyline that is draw and doesn't clear it therefore it is understandable why the line doesn't show. However on finding this out I now need to know how to clear it and how it can be restarted.

在code是如下：

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

To view what currently happens view the following link: http://kitlocker.com/sotest.php

推荐答案

而不是 poly.setMap（空）的; 通话 path.clear（ ）;

这篇关于从谷歌地图清晰折线，然后重新启动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！