9.3. Exemplo 3 - Exibindo Múltiplas Rotas

O exemplo a seguir mostra duas rotas geradas pela Trip API na região do município de Santos, SP.

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 o 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.lines obtém as coordenadas de latitude/longitude da resposta contendo das rotas realizadas pela Trip API com cores aleatórias, visto que não tem nenhuma definida. As respostas das rotas foram definidas nas variáveis tripSolution1 e tripSolution2 e adicionadas ao array da variável routes .

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 tripSolution1 = JSON.parse(`{
              "totalDistance": 367,
              "legs": [
                  {
                      "distance": 367,
                      "points": [
                          {
                              "latitude": -23.983273,
                              "longitude": -46.299793
                          },
                          {
                              "latitude": -23.982123,
                              "longitude": -46.299857
                          },
                          {
                              "latitude": -23.982008,
                              "longitude": -46.299494
                          },
                          {
                              "latitude": -23.982425,
                              "longitude": -46.299191
                          },
                          {
                              "latitude": -23.98223,
                              "longitude": -46.298604
                          },
                          {
                              "latitude": -23.982033,
                              "longitude": -46.298145
                          },
                          {
                              "latitude": -23.981830,
                              "longitude": -46.298312
                          }
                      ]
                  }
              ],
              "source": "MAPLINK"
          }`);

          const tripSolution2 = JSON.parse(`{
              "totalDistance": 466,
              "legs": [
                  {
                      "distance": 466,
                      "points": [
                          {
                              "latitude": -23.983253,
                              "longitude": -46.296054
                          },
                          {
                              "latitude": -23.983809,
                              "longitude": -46.296797
                          },
                          {
                              "latitude": -23.983358,
                              "longitude": -46.297131
                          },
                          {
                              "latitude": -23.982925,
                              "longitude": -46.297421
                          },
                          {
                              "latitude": -23.982033,
                              "longitude": -46.298145
                          },
                          {
                              "latitude": -23.981792,
                              "longitude": -46.297682
                          },
                          {
                              "latitude": -23.981549,
                              "longitude": -46.297285
                          },
                          {
                              "latitude": -23.981672,
                              "longitude": -46.297487
                          }
                      ]
                  }
              ],
              "source": "MAPLINK"
          }`);

        const routes = [tripSolution1, tripSolution2].map(trip => trip.legs[0].points);
        map.lines(routes);


        for (const route of routes) {  
            map.marker({
                latitude: route[0].latitude,
                longitude: route[0].longitude
            });

            map.marker({
                latitude: route[route.length - 1].latitude,
                longitude: route[route.length - 1].longitude
            });
        }
    </script>
  </body>
</html>