Aplicacions amb Flutter, Dart i Flame

Mostrem un mapa amb marcadors

Ara anem a afegir al mapa uns marcadors que indiquin els quatre centres docents que la UPC té al Campus Sud. Canviarem el punt de centrat i el zoom per tal que es vegi el Campus Sud sencer i centrat. També li diem que ens mostri la vista aèria, en lloc del mapa. Els marcadors estaran en un conjunt de dades (set) i, per a cada un, definirem un identificador únic, unes coordenades i un títol. Aquest títol es mostrarà quan piquem sobre el marcador en el mapa.

pant_principal.dart

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class PantPrincipal extends StatefulWidget {
  const PantPrincipal({super.key});

  @override
  State<PantPrincipal> createState() => _PantPrincipalState();
}

class _PantPrincipalState extends State<PantPrincipal> {
  final CameraPosition _posicioInicial = CameraPosition(
    target: LatLng(41.382865, 2.1153599),
    zoom: 16
  );
  final Set<Marker> _marcadors = {
    Marker(
      markerId: MarkerId("ETSEIB"), 
      position: LatLng(41.384929, 2.115582),
      infoWindow: InfoWindow(title: "ETSEIB")
    ),
    Marker(
      markerId: MarkerId("EPSEB"), 
      position: LatLng(41.383905, 2.112732),
      infoWindow: InfoWindow(title: "EPSEB")
    ),
    Marker(
      markerId: MarkerId("ETSAB"), 
      position: LatLng(41.384425, 2.113749),
      infoWindow: InfoWindow(title: "ETSAB")
    ),
    Marker(
      markerId: MarkerId("FME"), 
      position: LatLng(41.383522, 2.115755),
      infoWindow: InfoWindow(title: "FME")
    ),
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Mapa")),
      body: GoogleMap(
        initialCameraPosition: _posicioInicial,
        mapType: MapType.satellite,
        markers: _marcadors,
      ),
    );
  }
}

Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.