web-dev-qa-db-fra.com

Google Map Mettez en surbrillance le chemin lors du glissement dans l'itinéraire

J'utilise react js pour implémenter cette carte. Par défaut, j'aurai un itinéraire dans Google maps qui sera coloré en rouge. Dans le même itinéraire, je dois mettre en évidence un chemin spécifique qui sera mis en surbrillance en noir, comme ceci:

sample image

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 de surbrillance sera en noir selon l'image affichée. Ensuite, je dois calculer la distance du chemin en surbrillance en fonction du chemin par défaut.

Remarque: Le chemin de l'itinéraire par défaut commence et se termine au même point, et le point de départ est indiqué par une icône de drapeau. Les points de début et de fin ne seront pas les mêmes à la fois. 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
  }
};
63
user3470020

Est-ce que cela vous aidera?

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

Peut-être que cette action vous aidera

Il y a 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

De plus, il existe la deuxième façon d'essayer Simple Polylineshttps://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>
1
Aram Grigoryan
    // 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 
  */
0
Vignesh kumar