javascript - icon - google maps marker label content
Google Map resalta la ruta al arrastrar en la ruta (2)
Estoy usando react js para implementar este mapa. Por defecto, tendré una ruta en los mapas de Google que será de color rojo. En la misma ruta, necesito resaltar alguna ruta específica que se resaltará en negro, como esta:
En el lado derecho de la imagen, habrá un ícono de lápiz. Cuando hago clic en el icono, necesito resaltar la ruta específica solo en la línea roja. La ruta resaltada estará en negro según se muestra en la imagen. Luego necesito calcular la distancia de la ruta resaltada en función de la ruta predeterminada.
Nota: La ruta de ruta predeterminada comienza y termina en el mismo punto, y el punto de inicio se indica con un icono de bandera. El punto de inicio y finalización no será el mismo a la vez. Cambiarán la base de la respuesta del usuario.
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;
Mi respuesta de muestra:
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
}
};
¿Te ayudará esto?
Había algunas habilidades para
Drawing on the Map
https://developers.google.com/maps/documentation/javascript/overlays
Quizás esta acción te ayude
Hay una sección
Custom Overlays
https://developers.google.com/maps/documentation/javascript/customoverlays
Que está usando
OverlayView
Los ejemplos que puede encontrar aquí https://developers.google.com/maps/documentation/javascript/customoverlays
Además, existe la segunda forma de probar las
Simple Polylines
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
Aquí está la parte del ejemplo.
<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
*/