Ejemplo 2 – Visualización de una ruta generada por la Trip API
Este ejemplo muestra el resultado de una ruta entre dos puntos cercanos a la Avenida Paulista de la ciudad de São Paulo.
En la variable apiKey, añada la clave recibida de Maplink.
La variable map está asociada a la clase MaplinkMap y contiene las propiedades del mapa, como div donde se inicializará. En este caso, no hay una ubicación inicial definida, por lo que el mapa se centrará automáticamente cuando se obtenga la polilínea en el método line.
El método map.line obtiene las coordenadas de latitud/longitud de la respuesta que contiene la ruta realizada por la Trip API y las añade al mapa en color verde.
El método map.marker añade un marcador al principio y al final. Como no se ha declarado ningún icon, se muestra el marcador Maplink por defecto.
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://maps.maplink.global"></script>
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id="map"></div>
<script type = "text/javascript">
const apiKey = "SUA CHAVE DE API";
const map = new MaplinkMap(apiKey, "map");
const tripSolution = JSON.parse(`{
"id": "6099bda9059e8b46df94f8bc",
"clientId": "SUA CHAVE DE API",
"totalDistance": 737,
"totalNominalDuration": 88,
"averageSpeed": 30.15,
"legs": [
{
"distance": 737,
"nominalDuration": 88,
"averageSpeed": 30.15,
"points": [
{
"latitude": -23.56650175288036,
"longitude": -46.653812897469145
},
{
"latitude": -23.564855,
"longitude": -46.652203
},
{
"latitude": -23.561890765824277,
"longitude": -46.65578327260709
}
]
}
],
"source": "MAPLINK",
"createdAt": 1620688298404
}`);
const routePoints = tripSolution.legs[0].points;
map.line(routePoints, {
color: "green"
});
map.marker(routePoints[0], {
popup: "<strong>Ponto de Partida</strong>"
});
map.marker(routePoints[routePoints.length - 1], {
popup: "<strong>Ponto de Chegada</strong>"
});
</script>
</body>
</html>
