Adicione a navegação curva a curva ao seu aplicativo flutter com o mapbox

Publicado em 21/04/2024 por cacpnrj

Tempo de leitura: 2 minutes

A navegação curva a curva é um recurso que orienta os usuários de um local para outro com instruções detalhadas. Em um aplicativo móvel, esse recurso pode ser implementado usando um serviço de mapeamento, como o Mapbox. O Mapbox é uma plataforma de mapeamento popular e avançada que oferece uma variedade de APIs e SDKs para a criação de aplicativos baseados em localização. Neste artigo, aprenderemos como adicionar navegação curva a curva a um aplicativo Flutter usando o Mapbox.

Etapa 1: obter um token de acesso ao Mapbox Antes de começar a integrar o Mapbox ao seu aplicativo Flutter, você precisa obter um token de acesso. Para obter um token de acesso, crie uma conta gratuita no site do Mapbox e obtenha seu token de acesso no painel da conta.

Etapa 2: instalar o pacote Mapbox Flutter Para integrar o Mapbox ao seu aplicativo Flutter, você precisará instalar o pacote Mapbox Flutter. Para instalar esse pacote, abra seu arquivo pubspec.yaml e adicione a seguinte linha em dependências:

dependencies:
  mapbox_gl: ^0.16.0

Etapa 3: Exibir o mapa Em seguida, você precisará exibir o mapa em seu aplicativo Flutter. Para fazer isso, você pode usar o widget MapboxMap do pacote Mapbox Flutter. Para exibir o mapa, adicione o seguinte código à sua árvore de widgets:

MapboxMap(
  accessToken: "<your-access-token>",
  initialCameraPosition: CameraPosition(
    target: LatLng(37.7749, -122.4194),
    zoom: 12.0,
  ),
  onMapCreated: (MapboxMapController controller) {
    _controller = controller;
  },
),

Etapa 4: obter a rota Para obter a rota entre dois locais, você pode usar a API Mapbox Directions. Para fazer uma solicitação a essa API, você precisará especificar as coordenadas de origem e destino e o perfil (dirigir, andar de bicicleta, caminhar) que deseja usar.

Neste exemplo, usaremos o pacote http para fazer uma solicitação à API Mapbox Directions:\

String routeResponse = await http.get(
  "https://api.mapbox.com/directions/v5/mapbox/driving/"
  "${origin.longitude},${origin.latitude};"
  "${destination.longitude},${destination.latitude}?"
  "access_token=<your-access-token>"
);

Etapa 5: Decodificar a rota Depois de fazer uma solicitação à API do Mapbox Directions, você precisará decodificar a resposta para obter a rota. Para decodificar a resposta, você pode usar o pacote json no Flutter:

var decodedResponse = json.decode(routeResponse.body);
List<Point> route = decodeLine(
  decodedResponse['routes'][0]['geometry']
);

Etapa 6: exibir a rota no mapa Agora que você decodificou a rota, pode exibi-la no mapa. Para fazer isso, você pode usar o widget Polyline do pacote Mapbox Flutter

Polyline(
  polylineId: PolylineId("route"),
  points: route,
  color: Colors.red,
  width: 5.0,
),

Etapa 7: Adicionar navegação curva a curva

Por fim, para adicionar a navegação curva a curva, você precisará exibir as instruções de curva ao longo da rota. Para obter as instruções de mudança de direção, você pode usar as informações da resposta da API do Mapbox Directions:

List<LegStep> steps = decodedResponse['routes'][0]['legs'][0]['steps'];
List<Point> turnPoints = steps.map((step) => Point(
  latitude: step['maneuver']['location'][1],
  longitude: step['maneuver']['location'][0],
)).toList();

Em seguida, você pode exibir as instruções de mudança de direção no mapa usando marcadores e etiquetas:

Marker(
  markerId: MarkerId("turnPoint"),
  position: LatLng(
    turnPoints[index].latitude,
    turnPoints[index].longitude
  ),
  infoWindow: InfoWindow(
    title: steps[index]['maneuver']['instruction'],
  ),
),

Conclusão

Neste artigo, aprendemos como adicionar navegação curva a curva a um aplicativo Flutter usando o Mapbox. Passamos pelo processo de obtenção de um token de acesso ao Mapbox, exibição do mapa, obtenção da rota, decodificação da rota, exibição da rota no mapa e adição de instruções de mudança de direção. Com essas etapas, agora você pode criar um aplicativo de navegação curva a curva totalmente funcional no Flutter.

Twittar

0 Compart.