Changez la couleur entre les points de cheminement et adaptez l'itinéraire au marqueur de carte déplacé

West Publié le Dev

Ouest

J'utilise l'API google maps pour tracer un itinéraire dans une carte google intégrée. J'ai changé la couleur de la route du trou mais j'aimerais aussi changer la couleur entre les waypoints par exemple :

Démarrer --orange--> firstWP --red-- > secondWP --orange--> firstWP --red--> secondWp --orange--> Destination

La couleur entre firstWP et secondWP doit être modifiée, mais secondWP à FirstWP doit être de la même couleur que les autres parties de l'itinéraire.

De plus, je dois également déplacer les marqueurs de carte et l'itinéraire doit se déplacer/changer d'ajustement à la nouvelle position du marqueur de carte mais conserver la couleur différente.

Il s'agit d'un exemple minimal avec un marqueur de carte déplaçable et une couleur modifiée entre les points de cheminement, mais l'itinéraire ne s'adapte pas à la nouvelle position des marqueurs de carte

var map;
var directionsService;
var directionsDisplay;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    suppressPolylines: true
  });


  calcRoute(39.2903848, -76.6121893, 42.3600825, -71.05888);
}
google.maps.event.addDomListener(window, "load", initialize);

function calcRoute(origin_lat, origin_lng, destination_lat, destination_lng) {
  console.log("Entrée CALC ROUTE");

  var origin = new google.maps.LatLng(origin_lat, origin_lng);
  var destination = new google.maps.LatLng(destination_lat, destination_lng);
  var waypointsArray = document.getElementById('waypoints').value.split("|");

  var waypts = [];

  for (i = 0; i < waypointsArray.length; i++) {
    if (waypointsArray[i] != "") {
      var waypoint = waypointsArray[i];
      var waypointArray = waypoint.split(",");
      var waypointLat = waypointArray[0];
      var waypointLng = waypointArray[1];
      console.log("waypts lat " + waypointLat);
      console.log("waypts lng " + waypointLng);

      waypts.push({
        location: new google.maps.LatLng(waypointLat, waypointLng),
        stopover: true
      })
    }
  }
  console.log("waypts " + waypts.length);

  var request = {
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING,
    waypoints: waypts,
    provideRouteAlternatives: true
  };
  console.log("Calc request " + JSON.stringify(request));

  directionsService.route(request, customDirectionsRenderer);
}

function customDirectionsRenderer(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
    var bounds = new google.maps.LatLngBounds();
    var route = response.routes[0];
    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
    for (i = 0; i < legs.length; i++) {
      var polyline = new google.maps.Polyline({map:map, strokeColor: "blue", path:[]})
      if (i == 1) {
        polyline.setOptions({strokeColor: "red"});
        }
      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);
  }
};

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<input id="waypoints" value="39.9525839,-75.1652215|40.7127837,-74.0059413" />
<div id="map_canvas"></div>

http://jsfiddle.net/westify/vop9o1n5/1/

Est-il possible de faire ça? Ou n'est-ce possible que si vous restituez l'ensemble de l'itinéraire après avoir déplacé un waypoint ?

géocodezip

Une option serait d'écouter l' directions_changedévénement sur le DirectionsRenderer, lorsque cela se déclenche, redessiner les polylignes de directions.

var firstTime = true;
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  console.log("directions changed firstTime=" + firstTime);
  // prevent infinite loop
  if (firstTime) {
    google.maps.event.addListenerOnce(directionsDisplay, 'directions_changed', function() {
      console.log("directions changed"); 
      customDirectionsRenderer(directionsDisplay.getDirections(), "OK");
    });
  }
  firstTime = !firstTime;
});

violon de preuve de concept

extrait de code:

var map;
var directionsService;
var directionsDisplay;
var firstTime = true;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    suppressPolylines: true
  });
  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
    console.log("directions changed firstTime=" + firstTime);
    if (firstTime) {
      google.maps.event.addListenerOnce(directionsDisplay, 'directions_changed', function() {
        console.log("directions changed"); //+JSON.stringify(directionsDisplay.getDirections()));
        customDirectionsRenderer(directionsDisplay.getDirections(), "OK");
      });
    }
    firstTime = !firstTime;
  });


  calcRoute(39.2903848, -76.6121893, 42.3600825, -71.05888);
}
google.maps.event.addDomListener(window, "load", initialize);

function calcRoute(origin_lat, origin_lng, destination_lat, destination_lng) {
  console.log("Entrée CALC ROUTE");

  var origin = new google.maps.LatLng(origin_lat, origin_lng);
  var destination = new google.maps.LatLng(destination_lat, destination_lng);
  var waypointsArray = document.getElementById('waypoints').value.split("|");

  var waypts = [];

  for (i = 0; i < waypointsArray.length; i++) {
    if (waypointsArray[i] != "") {
      var waypoint = waypointsArray[i];
      var waypointArray = waypoint.split(",");
      var waypointLat = waypointArray[0];
      var waypointLng = waypointArray[1];
      console.log("waypts lat " + waypointLat);
      console.log("waypts lng " + waypointLng);

      waypts.push({
        location: new google.maps.LatLng(waypointLat, waypointLng),
        stopover: true
      })
    }
  }
  console.log("waypts " + waypts.length);

  var request = {
    origin: origin,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING,
    waypoints: waypts,
    provideRouteAlternatives: true
  };
  console.log("Calc request " + JSON.stringify(request));

  directionsService.route(request, customDirectionsRenderer);
}
var polylines = [];

function customDirectionsRenderer(response, status) {
  for (var i = 0; i < polylines.length; i++) {
    polylines[i].setMap(null);
  }
  polylines = [];
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
    var bounds = new google.maps.LatLngBounds();
    var route = response.routes[0];
    var path = response.routes[0].overview_path;
    var legs = response.routes[0].legs;
    for (i = 0; i < legs.length; i++) {
      var polyline = new google.maps.Polyline({
        map: map,
        strokeColor: "blue",
        path: []
      });
      polylines.push(polyline);
      if (i == 1) {
        polyline.setOptions({
          strokeColor: "red"
        });
      }
      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);
  }
};

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="waypoints" value="39.9525839,-75.1652215|40.7127837,-74.0059413" />
<div id="map_canvas"></div>

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le2021-06-22

laisse moi dire quelques mots

0commentaires

connexionAprès avoir participé à la revue

TOP liste

article