Was soll ich tun, um die Polylinie zu entfernen, (A) & (B) Markierungen

Question

Ich habe diesen Code gefunden, um das Fahrzeug basierend auf dem GPS-Gerät zu verfolgen, aber ich weiß nicht, wie (A, B) Marker und ich möchte auch nicht die Polylinie zeichnen. Hier

ist der Code, den ich verwenden:

//https://stackoverflow.com/questions/23149613/change-google-map-marker- 

orientation-according-path-direction 
var map; 
var directionDisplay; 
var directionsService; 
var stepDisplay; 
//var markerArray = []; 
var position; 
var marker = null; 
var polyline = null; 
var poly2 = null; 
var speed = 0.000005, wait = 1; 
var infowindow = null; 
var timerHandle = null; 
var arrMarkers = []; 
var markerIcon = '/Images/school-bus.png'; 

function getMarkerCurrentLocation(deviceId) { 
    debugger; 
    var mrkr = getMarkerByDeviceId(deviceId); 
    if (mrkr != null && mrkr != undefined) { 
     //var mrkrLat = mrkr.getPosition().lat(); 
     //var mrkrLng = mrkr.getPosition().lng(); 
     var mrkrLat = mrkr.lat; 
     var mrkrLng = mrkr.lng; 
     return new google.maps.LatLng(parseFloat(mrkrLat), parseFloat(mrkrLng)); 
    } 
} 

function addMarker(deviceId, lat, lng) { 
    debugger; 
    //var marker = new google.maps.Marker({ 
    // position: new google.maps.LatLng(parseFloat(lat), parseFloat(lng)), 
    // icon: markerIcon, 
    // zIndex: Math.round(lat * -100000) << 5, 
    // map: map 
    //}); 
    //marker.id = deviceId; 
    arrMarkers.push({ deviceId: deviceId, lat: lat, lng: lng }); 
} 

function getMarkerByDeviceId(deviceId) { 
    debugger; 
    return arrMarkers.filter(function (obj) { 
     return obj.deviceId == deviceId; 
    })[0]; 
} 

function removeFromArrMarkersByDeviceId(deviceId) { 
    debugger; 
    arrMarkers = arrMarkers.filter(function (obj) { 
     return obj.deviceId !== deviceId; 
    }); 
} 

function initialize() { 
    infowindow = new google.maps.InfoWindow({ 
     size: new google.maps.Size(150, 50) 
    }); 
    // Instantiate a directions service. 
    directionsService = new google.maps.DirectionsService(); 

    // Create a map and center it on Manhattan. 
    var myOptions = { 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: { lat: 21.3891, lng: 39.8579 } 
    }; 
    map = new google.maps.Map(document.getElementById("map"), myOptions); 

    // Create a renderer for directions and bind it to the map. 
    var rendererOptions = { 
     map: map 
    }; 
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

    // Instantiate an info window to hold step text. 
    stepDisplay = new google.maps.InfoWindow(); 

    polyline = new google.maps.Polyline({ 
     path: [], 
     //strokeColor: '#FF0000', 
     strokeOpacity: 9.0, 
     strokeWeight: 0 
    }); 
    poly2 = new google.maps.Polyline({ 
     path: [], 
     //strokeColor: '#FF0000', 
     strokeOpacity: 9.0, 
     strokeWeight: 0 
    }); 
} 

var steps = []; 

function calcRoute(deviceId, destinationLat, destinationLng) { 
    console.log(deviceId); 
    if (deviceId == "50204") { 
     debugger; 
     var mrkr = getMarkerByDeviceId(deviceId); 
     if (mrkr != null && mrkr != undefined) { 
      if (mrkr.lat != destinationLat | mrkr.lng != destinationLng) { 
       debugger; 
       if (timerHandle) { 
        clearTimeout(timerHandle); 
       } 
       if (marker) { 
        marker.setMap(null); 
       } 
       polyline.setMap(null); 
       poly2.setMap(null); 
       directionsDisplay.setMap(null); 
       polyline = new google.maps.Polyline({ 
        path: [], 
        //strokeColor: '#FF0000', 
        strokeWeight: 0 
       }); 
       poly2 = new google.maps.Polyline({ 
        path: [], 
        //strokeColor: '#FF0000', 
        strokeWeight: 0 
       }); 
       // Create a renderer for directions and bind it to the map. 
       var rendererOptions = { 
        map: map 
       }; 
       debugger; 
       directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
       var start = getMarkerCurrentLocation(deviceId); 
       var end = new google.maps.LatLng(parseFloat(destinationLat), parseFloat(destinationLng)); 

       removeFromArrMarkersByDeviceId(deviceId); 
       addMarker(deviceId, destinationLat, destinationLng); 

       var travelMode = google.maps.DirectionsTravelMode.DRIVING; 

       var request = { 
        origin: start, 
        destination: end, 
        travelMode: travelMode 
       }; 

       // Route the directions and pass the response to a 
       // function to create markers for each step. 
       directionsService.route(request, function (response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         directionsDisplay.setDirections(response); 

         //var bounds = new google.maps.LatLngBounds(); 
         var route = response.routes[0]; 
         startLocation = new Object(); 
         endLocation = new Object(); 

         // For each route, display summary information. 
         var path = response.routes[0].overview_path; 
         var legs = response.routes[0].legs; 
         for (i = 0; i < legs.length; i++) { 
          if (i === 0) { 
           startLocation.latlng = legs[i].start_location; 
           startLocation.address = legs[i].start_address; 
           // marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green"); 
          } 
          endLocation.latlng = legs[i].end_location; 
          endLocation.address = legs[i].end_address; 
          var steps = legs[i].steps; 
          for (j = 0; j < steps.length; j++) { 
           var nextSegment = steps[j].path; 
           for (k = 0; k < nextSegment.length; k++) { 
            polyline.getPath().push(nextSegment[k]); 
            //bounds.extend(nextSegment[k]); 
           } 
          } 
         } 
         //polyline.setMap(map); 
         //map.fitBounds(bounds); 
         //map.setZoom(18); 
         startAnimation(deviceId); 
        } 
       }); 
      } 

     } else { 
      // debugger; 
      addMarker(deviceId, destinationLat, destinationLng); 
     } 
    } 
} 
var step = 50; // 5; // metres 
var tick = 1000; // milliseconds 
var eol; 
var k = 0; 
var stepnum = 0; 
var speed = ""; 
var lastVertex = 1; 

//=============== animation functions ====================== 
function updatePoly(d) { 
    // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow 
    if (poly2.getPath().getLength() > 20) { 
     poly2 = new google.maps.Polyline([polyline.getPath().getAt(lastVertex - 1)]); 
     // map.addOverlay(poly2) 
    } 

    if (polyline.GetIndexAtDistance(d) < lastVertex + 2) { 
     if (poly2.getPath().getLength() > 1) { 
      poly2.getPath().removeAt(poly2.getPath().getLength() - 1); 
     } 
     poly2.getPath().insertAt(poly2.getPath().getLength(), polyline.GetPointAtDistance(d)); 
    } else { 
     poly2.getPath().insertAt(poly2.getPath().getLength(), endLocation.latlng); 
    } 
} 

function animate(d) { 
    if (d > eol) { 
     //map.panTo(endLocation.latlng); 
     marker.setPosition(endLocation.latlng); 
     return; 
    } 
    var p = polyline.GetPointAtDistance(d); 
    //map.panTo(p); 
    var lastPosn = marker.getPosition(); 
    marker.setPosition(p); 
    var heading = google.maps.geometry.spherical.computeHeading(lastPosn, p); 
    icon.rotation = heading; 
    marker.setIcon(icon); 
    updatePoly(d); 
    timerHandle = setTimeout("animate(" + (d + step) + ")", tick); 
} 

function startAnimation(deviceId) { 
    debugger; 
    eol = polyline.Distance(); 
    //map.setCenter(polyline.getPath().getAt(0)); 
    marker = new google.maps.Marker({ 
     position: polyline.getPath().getAt(0), 
     map: map, 
     icon: icon, 
     deviceId: deviceId 
    }); 

    poly2 = new google.maps.Polyline({ 
     path: [polyline.getPath().getAt(0)], 
     //strokeColor: "#0000FF", 
     strokeWeight: 0 
    }); 
    // map.addOverlay(poly2); 
    setTimeout("animate(50)", 2000); // Allow time for the initial map display 
} 

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

//=============== ~animation funcitons ===================== 

var car = "M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z"; 
var icon = { 
    path: car, 
    scale: .7, 
    strokeColor: 'white', 
    strokeWeight: .10, 
    fillOpacity: 1, 
    fillColor: '#404040', 
    offset: '5%', 
    // rotation: parseInt(heading[i]), 
    anchor: new google.maps.Point(10, 25) // orig 10,50 back of car, 10,0 front of car, 10,25 center of car 
}; 

/*********************************************************************\ 
*                  * 
* epolys.js           by Mike Williams * 
* updated to API v3         by Larry Ross * 
*                  * 
* A Google Maps API Extension           * 
*                  * 
* Adds various Methods to google.maps.Polygon and google.maps.Polyline * 
*                  * 
* .Contains(latlng) returns true is the poly contains the specified * 
*     GLatLng           * 
*                  * 
* .Area()   returns the approximate area of a poly that is * 
*     not self-intersecting        * 
*                  * 
* .Distance()  returns the length of the poly path    * 
*                  * 
* .Bounds()   returns a GLatLngBounds that bounds the poly  * 
*                  * 
* .GetPointAtDistance() returns a GLatLng at the specified distance * 
*     along the path.         * 
*     The distance is specified in metres    * 
*     Reurns null if the path is shorter than that  * 
*                  * 
* .GetPointsAtDistance() returns an array of GLatLngs at the   * 
*     specified interval along the path.    * 
*     The distance is specified in metres    * 
*                  * 
* .GetIndexAtDistance() returns the vertex number at the specified * 
*     distance along the path.       * 
*     The distance is specified in metres    * 
*     Returns null if the path is shorter than that  * 
*                  * 
* .Bearing(v1?,v2?) returns the bearing between two vertices   * 
*     if v1 is null, returns bearing from first to last * 
*     if v2 is null, returns bearing from v1 to next * 
*                  * 
*                  * 
*********************************************************************** 
*                  * 
* This Javascript is provided by Mike Williams      * 
* Blackpool Community Church Javascript Team      * 
* http://www.blackpoolchurch.org/         * 
* http://econym.org.uk/gmap/          * 
*                  * 
* This work is licenced under a Creative Commons Licence   * 
* http://creativecommons.org/licenses/by/2.0/uk/     * 
*                  * 
*********************************************************************** 
*                  * 
* Version 1.1  6-Jun-2007          * 
* Version 1.2  1-Jul-2007 - fix: Bounds was omitting vertex zero * 
*        add: Bearing       * 
* Version 1.3  28-Nov-2008 add: GetPointsAtDistance()   * 
* Version 1.4  12-Jan-2009 fix: GetPointsAtDistance()   * 
* Version 3.0  11-Aug-2010 update to v3       * 
*                  * 
\*********************************************************************/ 

// === first support methods that don't (yet) exist in v3 
google.maps.LatLng.prototype.distanceFrom = function (newLatLng) { 
    var EarthRadiusMeters = 6378137.0; // meters 
    var lat1 = this.lat(); 
    var lon1 = this.lng(); 
    var lat2 = newLatLng.lat(); 
    var lon2 = newLatLng.lng(); 
    var dLat = (lat2 - lat1) * Math.PI/180; 
    var dLon = (lon2 - lon1) * Math.PI/180; 
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1 * Math.PI/180) * Math.cos(lat2 * Math.PI/180) * Math.sin(dLon/2) * Math.sin(dLon/2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); 
    var d = EarthRadiusMeters * c; 
    return d; 
} 

google.maps.LatLng.prototype.latRadians = function() { 
    return this.lat() * Math.PI/180; 
} 

google.maps.LatLng.prototype.lngRadians = function() { 
    return this.lng() * Math.PI/180; 
} 

// === A method which returns the length of a path in metres === 
google.maps.Polygon.prototype.Distance = function() { 
    var dist = 0; 
    for (var i = 1; i < this.getPath().getLength() ; i++) { 
     dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1)); 
    } 
    return dist; 
} 

// === A method which returns a GLatLng of a point a given distance along the path === 
// === Returns null if the path is shorter than the specified distance === 
google.maps.Polygon.prototype.GetPointAtDistance = function (metres) { 
    // some awkward special cases 
    if (metres == 0) return this.getPath().getAt(0); 
    if (metres < 0) return null; 
    if (this.getPath().getLength() < 2) return null; 
    var dist = 0; 
    var olddist = 0; 
    for (var i = 1; 
     (i < this.getPath().getLength() && dist < metres) ; i++) { 
     olddist = dist; 
     dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1)); 
    } 
    if (dist < metres) { 
     return null; 
    } 
    var p1 = this.getPath().getAt(i - 2); 
    var p2 = this.getPath().getAt(i - 1); 
    var m = (metres - olddist)/(dist - olddist); 
    return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m); 
} 

// === A method which returns an array of GLatLngs of points a given interval along the path === 
google.maps.Polygon.prototype.GetPointsAtDistance = function (metres) { 
    debugger; 
    var next = metres; 
    var points = []; 
    // some awkward special cases 
    if (metres <= 0) return points; 
    var dist = 0; 
    var olddist = 0; 
    for (var i = 1; 
     (i < this.getPath().getLength()) ; i++) { 
     olddist = dist; 
     dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1)); 
     while (dist > next) { 
      var p1 = this.getPath().getAt(i - 1); 
      var p2 = this.getPath().getAt(i); 
      var m = (next - olddist)/(dist - olddist); 
      points.push(new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m)); 
      next += metres; 
     } 
    } 
    return points; 
} 

// === A method which returns the Vertex number at a given distance along the path === 
// === Returns null if the path is shorter than the specified distance === 
google.maps.Polygon.prototype.GetIndexAtDistance = function (metres) { 
    // some awkward special cases 
    if (metres == 0) return this.getPath().getAt(0); 
    if (metres < 0) return null; 
    var dist = 0; 
    var olddist = 0; 
    for (var i = 1; 
     (i < this.getPath().getLength() && dist < metres) ; i++) { 
     olddist = dist; 
     dist += this.getPath().getAt(i).distanceFrom(this.getPath().getAt(i - 1)); 
    } 
    if (dist < metres) { 
     return null; 
    } 
    return i; 
} 
// === Copy all the above functions to GPolyline === 
google.maps.Polyline.prototype.Distance = google.maps.Polygon.prototype.Distance; 
google.maps.Polyline.prototype.GetPointAtDistance = google.maps.Polygon.prototype.GetPointAtDistance; 
google.maps.Polyline.prototype.GetPointsAtDistance = google.maps.Polygon.prototype.GetPointsAtDistance; 
google.maps.Polyline.prototype.GetIndexAtDistance = google.maps.Polygon.prototype.GetIndexAtDistance; 

The Route Pic

Answer 1

Versuchen Sie folgendes:

var rendererOptions = { 
    map: map, 
    suppressMarkers: true 
}; 
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

Wenn Sie nicht etwas auf der Karte angezeigt werden soll, dann Karte entfernen: map . nicht sicher, ob der Rest des Codes hat sich wat (wie Zoom und Pan nach der Routenanzeige)

var rendererOptions = { 
    map: null, 
    suppressMarkers: true 
}; 
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);