Exemplo 2 – Exibindo rota gerada pela Trip API
Neste exemplo é apresentado o resultado de uma rota entre 2 pontos próximos da Avenida Paulista no município de São Paulo.
Na variável apiKey, adicione sua chave recebida da Maplink.
A variável map é associada com a classe MaplinkMap e contém as propriedades do mapa, como a div onde será inicializado. Neste caso, não há localização inicial definida, assim o mapa será centralizado automaticamente quando for obtida a polilinha no método line.
O método map.line obtém as coordenadas latitude/longitude da resposta contendo a rota realizada pela Trip API e adiciona ao mapa com a cor verde..
O método map.marker adiciona um marcador no início e no fim. Como nenhum icon foi declarado, é exibido o marcador padrão da Maplink.
<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>
