Google Map выделите путь при перетаскивании по маршруту

Я использую реагирование JS для реализации этой карты. По умолчанию у меня будет один маршрут на картах Google, который будет окрашен в красный цвет. В том же маршруте мне нужно выделить какой-то определенный путь, который будет выделен черным, например:

sample image

На правой стороне изображения будет один значок пера. Когда я нажимаю на иконку, мне нужно выделить конкретный путь только на красной линии. Путь выделения будет черным, как показано на изображении. Затем мне нужно рассчитать расстояние выделенного пути на основе пути по умолчанию.

Примечание. Маршрут маршрута по умолчанию начинается и заканчивается в одной и той же точке, а начальная точка обозначается значком флага. Начальная и конечная точки не будут одинаковыми одновременно. Они будут меняться в зависимости от ответа пользователя.

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;

Мой пример ответа:

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

ОТВЕТЫ

Ответ 1

Это поможет тебе?

Были некоторые возможности Drawing on the Map https://developers.google.com/maps/documentation/javascript/overlays

Может быть, это действие поможет вам

Есть раздел Custom Overlays

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

Который использует OverlayView

Примеры вы можете найти здесь https://developers.google.com/maps/documentation/javascript/customoverlays

Кроме того, существует второй способ, с помощью которого вы можете попробовать Simple Polylines Https://developers.google.com/maps/documentation/javascript/examples/polyline-simple.

Вот часть примера

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

Ответ 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 
  */