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:
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
}
};
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>
// 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
*/