Google Map Mettre en évidence le chemin sur Glisser dans l'itinéraire

Question

J'utilise react js pour mettre en œuvre cette carte. Par défaut, j'aurai une route dans Google maps qui sera colorée en rouge. Dans le même itinéraire, j'ai besoin de mettre en évidence un chemin spécifique qui sera mis en évidence en noir, comme ceci :

Sur le côté droit de l'image, il y aura une icône de stylo. Lorsque je clique sur l'icône, je dois mettre en évidence le chemin spécifique sur la ligne rouge uniquement. Le chemin en surbrillance sera en noir comme sur l'image. Ensuite, je dois calculer la distance du chemin en surbrillance sur la base du chemin par défaut.

Note : L'itinéraire par défaut commence et se termine au même endroit, et le point de départ est indiqué par une icône en forme de drapeau. Le point de départ et le point d'arrivée ne seront pas les mêmes à un moment donné. Ils changeront en fonction de la réponse de l'utilisateur.

class MappedRoutes extends React.Component {
  constructor(props) {
    super(props);

    this.drawFreeHand = this.drawFreeHand.bind(this);
  }
  componentDidMount() {
    const routeCoordinatesArr = [];
    map(routeMapped.route.routeCoordinates, el => {
      routeCoordinatesArr.push({
        lat: parseFloat(el.lat),
        lng: parseFloat(el.lng)
      });
    });
    this.mapLocation(routeCoordinatesArr);
  }

  mapLocation(routecoordinates) {
    let currentMarker;
let snapToRoute;
this.map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: routecoordinates[0].lat, lng: routecoordinates[0].lng },
  minZoom: 3,
  zoom: 14,
  disableDoubleClickZoom: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
});

// Google map direction service for draw routes
const flightPath = new google.maps.Polyline({
  path: routecoordinates,
  geodisc: true,
  avoidTolls: true,
  strokeColor: '#db3eb1',
  strokeOpacity: 1,
  strokeWeight: 3,
});

flightPath.setMap(this.map);

google.maps.event.addDomListener(flightPath, 'click', evt => {
  currentMarker = new google.maps.Marker({
    position: evt.latLng,
    map: this.map,
    draggable: true,
    icon: iconPencile,
  });
  const snapToRoute = new SnapToRoute(this.map, currentMarker, flightPath);
  this.drawFreeHand(currentMarker);
});
  }

    drawFreeHand(marker) {
    const { highlightValue } = this.props;
    const path = new google.maps.MVCArray();
    const service = new google.maps.DirectionsService();
    const polyline = new google.maps.Polyline({
      map: this.map,
      fillColor: '#ffd83c',
      fillOpacity: 0.8,
      strokeColor: '#ffd83c',
      strokeOpacity: 0.8,
      strokeWeight: 5,
      clickable: false,
      editable: false,
    });
    google.maps.event.addListener(marker, 'drag', event => {
      if (path.getLength() === 0) {
        path.push(event.latLng);
        polyline.setPath(path);
      } else {
        service.route(
          {
            origin: path.getAt(path.getLength() - 1),
            destination: event.latLng,
            travelMode: google.maps.DirectionsTravelMode.WALKING,
          },
          (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
              for (let i = 0, len = result.routes[0].overview_path.length; i < len; i += 1) {
                path.push(result.routes[0].overview_path[i]);
              }
            }
          }
        );
      }
    });
  }
  render() {
    return (
      <div>
        <div onClick={this.drawFreeHand}>click to highlight</div>
        <div id="map" style={{ height: "500px" }} />
      </div>
    );
  }
}
export default MappedRoutes;

Mon exemple de réponse :

export const routeMapped = {
  route: {
    routeId: "5a278bbfc9e77c0001cdf76d",
    athleteId: "59d62dc0c9e77c0001ee60f5",
    name: "Sathya new route",
    city:
      "105, Pasumpon Muthuramalinga Thevar Rd, RA Puram, Austin Nagar, Alwarpet, Chennai, Tamil Nadu 600028, India",
    postalCode: "600028",
    footPath: "FOLLOW",
    routeType: "MAP",
    routeCoordinates: [
      {
        lat: "13.02757",
        lng: "80.25241000000001",
        dis: 0,
        ele: 11.04315
      },
      {
        lat: "13.027460000000001",
        lng: "80.25280000000001",
        dis: 0.03,
        ele: 11.61113
      },
      {
        lat: "13.02724",
        lng: "80.25385",
        dis: 0.1,
        ele: 13
      },
      {
        lat: "13.027190000000001",
        lng: "80.25404",
        dis: 0.11,
        ele: 13
      },
      {
        lat: "13.02715",
        lng: "80.25410000000001",
        dis: 0.12,
        ele: 13
      },
      {
        lat: "13.02715",
        lng: "80.25423",
        dis: 0.13,
        ele: 13
      },
      {
        lat: "13.0271",
        lng: "80.25593",
        dis: 0.24,
        ele: 10.75041
      },
      {
        lat: "13.027090000000001",
        lng: "80.25710000000001",
        dis: 0.32,
        ele: 10.75639
      },
      {
        lat: "13.027070000000002",
        lng: "80.25792000000001",
        dis: 0.37,
        ele: 11.9969
      },
      {
        lat: "13.027080000000002",
        lng: "80.25885000000001",
        dis: 0.44,
        ele: 11.54305
      },
      {
        lat: "13.0271",
        lng: "80.25989000000001",
        dis: 0.51,
        ele: 7.42083
      },
      {
        lat: "13.02706",
        lng: "80.26016000000001",
        dis: 0.53,
        ele: 7.69134
      },
      {
        lat: "13.02697",
        lng: "80.26058",
        dis: 0.56,
        ele: 8.78328
      },
      {
        lat: "13.02683",
        lng: "80.26158000000001",
        dis: 0.62,
        ele: 10.39793
      },
      {
        lat: "13.02677",
        lng: "80.26199000000001",
        dis: 0.65,
        ele: 10.99504
      },
      {
        lat: "13.02663",
        lng: "80.26337000000001",
        dis: 0.75,
        ele: 10.00481
      },
      {
        lat: "13.02649",
        lng: "80.26448",
        dis: 0.82,
        ele: 9.75728
      },
      {
        lat: "13.02626",
        lng: "80.26591",
        dis: 0.92,
        ele: 7.33569
      },
      {
        lat: "13.025620000000002",
        lng: "80.26547000000001",
        dis: 0.97,
        ele: 8.88202
      },
      {
        lat: "13.025440000000001",
        lng: "80.26535000000001",
        dis: 0.99,
        ele: 9.03837
      },
      {
        lat: "13.02491",
        lng: "80.26495000000001",
        dis: 1.03,
        ele: 8.40581
      },
      {
        lat: "13.02424",
        lng: "80.26446",
        dis: 1.09,
        ele: 9
      },
      {
        lat: "13.024090000000001",
        lng: "80.26441000000001",
        dis: 1.1,
        ele: 9
      },
      {
        lat: "13.024030000000002",
        lng: "80.26439",
        dis: 1.1,
        ele: 9
      },
      {
        lat: "13.023560000000002",
        lng: "80.26417000000001",
        dis: 1.14,
        ele: 8.94518
      },
      {
        lat: "13.022110000000001",
        lng: "80.26336",
        dis: 1.25,
        ele: 7.18578
      },
      {
        lat: "13.02162",
        lng: "80.26315000000001",
        dis: 1.29,
        ele: 7.92565
      },
      {
        lat: "13.02148",
        lng: "80.26303",
        dis: 1.3,
        ele: 7.95145
      },
      {
        lat: "13.02078",
        lng: "80.26280000000001",
        dis: 1.35,
        ele: 7.69057
      },
      {
        lat: "13.020320000000002",
        lng: "80.26270000000001",
        dis: 1.39,
        ele: 7.16353
      },
      {
        lat: "13.02012",
        lng: "80.26257000000001",
        dis: 1.4,
        ele: 7.14811
      },
      {
        lat: "13.01997",
        lng: "80.26243000000001",
        dis: 1.42,
        ele: 7.25697
      },
      {
        lat: "13.01965",
        lng: "80.2621",
        dis: 1.45,
        ele: 7.20241
      },
      {
        lat: "13.01913",
        lng: "80.26159000000001",
        dis: 1.5,
        ele: 7.5177
      },
      {
        lat: "13.019020000000001",
        lng: "80.26153000000001",
        dis: 1.51,
        ele: 7.6779
      },
      {
        lat: "13.018910000000002",
        lng: "80.26142",
        dis: 1.52,
        ele: 7.83809
      },
      {
        lat: "13.0187",
        lng: "80.26121",
        dis: 1.54,
        ele: 8.12365
      },
      {
        lat: "13.0187",
        lng: "80.26088",
        dis: 1.56,
        ele: 8.05447
      },
      {
        lat: "13.01866",
        lng: "80.25992000000001",
        dis: 1.62,
        ele: 8.20218
      },
      {
        lat: "13.018630000000002",
        lng: "80.25916000000001",
        dis: 1.68,
        ele: 8.21478
      },
      {
        lat: "13.018640000000001",
        lng: "80.25892",
        dis: 1.69,
        ele: 8.12121
      },
      {
        lat: "13.01862",
        lng: "80.25861",
        dis: 1.71,
        ele: 8.0189
      },
      {
        lat: "13.01861",
        lng: "80.25818000000001",
        dis: 1.74,
        ele: 7.84774
      },
      {
        lat: "13.018650000000001",
        lng: "80.25779",
        dis: 1.77,
        ele: 7.78325
      },
      {
        lat: "13.018680000000002",
        lng: "80.25767",
        dis: 1.78,
        ele: 7.82694
      },
      {
        lat: "13.018730000000001",
        lng: "80.25754",
        dis: 1.79,
        ele: 7.89976
      },
      {
        lat: "13.01895",
        lng: "80.25705",
        dis: 1.82,
        ele: 8.44032
      },
      {
        lat: "13.019480000000001",
        lng: "80.25598000000001",
        dis: 1.9,
        ele: 9.23848
      },
      {
        lat: "13.019870000000001",
        lng: "80.25523000000001",
        dis: 1.96,
        ele: 9.76589
      },
      {
        lat: "13.02006",
        lng: "80.25477000000001",
        dis: 1.99,
        ele: 9.48015
      },
      {
        lat: "13.020320000000002",
        lng: "80.25369",
        dis: 2.07,
        ele: 8.90729
      },
      {
        lat: "13.020430000000001",
        lng: "80.25333",
        dis: 2.1,
        ele: 8.383
      },
      {
        lat: "13.02053",
        lng: "80.25319",
        dis: 2.11,
        ele: 8.17911
      },
      {
        lat: "13.020690000000002",
        lng: "80.2531",
        dis: 2.12,
        ele: 8.04804
      },
      {
        lat: "13.02091",
        lng: "80.25304000000001",
        dis: 2.14,
        ele: 7.95772
      },
      {
        lat: "13.02153",
        lng: "80.25297",
        dis: 2.18,
        ele: 7.72059
      },
      {
        lat: "13.021700000000001",
        lng: "80.25295000000001",
        dis: 2.19,
        ele: 7.7359
      },
      {
        lat: "13.02213",
        lng: "80.25287",
        dis: 2.22,
        ele: 7.91471
      },
      {
        lat: "13.024360000000001",
        lng: "80.25274",
        dis: 2.37,
        ele: 10
      },
      {
        lat: "13.02448",
        lng: "80.25274",
        dis: 2.38,
        ele: 10
      },
      {
        lat: "13.024630000000002",
        lng: "80.25276000000001",
        dis: 2.39,
        ele: 10
      },
      {
        lat: "13.025210000000001",
        lng: "80.25299000000001",
        dis: 2.44,
        ele: 10.37474
      },
      {
        lat: "13.02682",
        lng: "80.25375000000001",
        dis: 2.56,
        ele: 12.67804
      },
      {
        lat: "13.02715",
        lng: "80.25383000000001",
        dis: 2.58,
        ele: 13
      },
      {
        lat: "13.02724",
        lng: "80.25385",
        dis: 2.59,
        ele: 13
      },
      {
        lat: "13.027320000000001",
        lng: "80.25341",
        dis: 2.62,
        ele: 12.49951
      },
      {
        lat: "13.02753",
        lng: "80.25256",
        dis: 2.68,
        ele: 11.2616
      },
      {
        lat: "13.02757",
        lng: "80.25241000000001",
        dis: 2.69,
        ele: 11.04315
      }
    ],
    distance: 2.69,
    maxElevation: 0,
    minElevation: 0,
    startingLocation: {
      type: "ENTRY",
      coordinates: ["13.02757", "80.25241000000001"]
    },
    endingLocation: {
      type: "EXIT",
      coordinates: ["13.02757", "80.25241000000001"]
    },
    split: [
      {
        id: 1,
        splitNo: 1,
        splitDistance: 2.69,
        splitMarkers: {
          markerType: "ENTRY",
          markerId: "1",
          startPosLat: "13.02757",
          startPosLang: "80.25241000000001",
          endPosLat: "13.02757",
          endPosLang: "80.25241000000001"
        }
      }
    ],
    laps: 1,
    createdDatetime: null,
    updatedDatetime: null
  }
};

Answer 1

Cela vous aidera-t-il ?

Il y avait quelques capacités à Drawing on the Map https://developers.google.com/maps/documentation/javascript/overlays

Peut-être que cette action vous aidera

Il existe une section Custom Overlays

https://developers.google.com/maps/documentation/javascript/customoverlays

Qui utilise OverlayView

Les exemples que vous pouvez trouver ici https://developers.google.com/maps/documentation/javascript/customoverlays

Il y a aussi la deuxième méthode que vous pouvez essayer. Simple Polylines https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

Voici la partie de l'exemple

<script>

      // This example creates a 2-pixel-wide red polyline showing the path of
      // the first trans-Pacific flight between Oakland, CA, and Brisbane,
      // Australia which was made by Charles Kingsford Smith.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: 'terrain'
        });

        var flightPlanCoordinates = [
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
      }
    </script>

Answer 2

    // You need to have a polyline, 

    var poly = new google.maps.Polyline({
      map: _map,
      strokeColor: '#000',
      strokeWeight: 2,
      strokeOpacity: 0.8,
      clickable: false
    });

    // Then you have to add a listener, This will add points to polyline as you drag cursor

    var move = google.maps.event.addListener(_map, 'mousemove', function (e) {
      poly.getPath().push(e.latLng);
    });

    // on mouseup add this,
    google.maps.event.addListenerOnce(_map, 'mouseup', function (e) {
      google.maps.event.removeListener(move);
      var path = poly.getPath();
      poly.setMap(null);
      var polygon = new google.maps.Polygon({
        map: _map,
        path: path,
        strokeColor: '#000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#000',
        fillOpacity: 0
      });
    });              

  /* 
    Note:
    During dragging, you must temporarily make the map non draggable. This can be done 
    by setting draggable as false 
  */