Udforskning af Google Maps i Flutter

Tilføjelse af officielt understøttede Google Maps i en Flutter-app

Google offentliggjorde for nylig det officielle Google Maps-plugin til Flutter og tilføjede officiel support til Google Maps i Flutter.

Denne artikel vil se på, hvordan du tilføjer Google Maps til et Flutter-projekt og de tilgængelige funktioner og tilpasning. I skrivende stund er dette plugin stadig i udviklereksempel og kan have ødelagte ændringer i fremtiden. Jeg vil gøre mit bedste for at opdatere artiklen, når det er nødvendigt.

Bemærk: Da Google Maps er afhængig af en ekstern pakke og ikke er indbygget, har jeg ikke tilføjet denne artikel som en del af min Deep Dive-serie i widgets. Ikke desto mindre vil denne artikel følge et lignende mønster.

Opsætning af vores app

Inden vi starter, er vi nødt til at konfigurere vores API-nøgler, så vores app fungerer med Google Maps. De generelle instruktioner gives her i pakken og følg dem for at opsætte dit projekt.

I en nøddeskal:

  1. Opret en Google Maps API-nøgle her.
  2. Tilføj nøgle til Android manifest.xml:

3. Tilføj nøgle til iOS:

Tilføj GoogleMaps-importen til Runner -> AppDelegate.m, og tilføj API-nøglen. Din fil skal se sådan ud:

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps / GoogleMaps.h"

@ implementering AppDelegate

- (BOOL) ansøgning: (UIAansøgning *) ansøgning
    didFinishLaunchingWithOptions: (NSDictionary *) launchOptions {
    [GMSServices levererAPIKey: @ "YOUR API KEY"];
  [GeneratedPluginRegistrant registerWithRegistry: self];
  // Overstyringspunkt for tilpasning efter applikationsstart.
  returner [superapplikation: applikation didFinishLaunchingWithOptions: launchOptions];
}

@ende

4. Føj dette til Info.plist

 io.flutter.embedded_views_preview 
 JA 

Og du er klar!

Føjelse af et Google Map til en skærm

Hvis du vil tilføje et Google Map, skal du bruge en GoogleMap-widget i dit widget-træ. Her er et grundlæggende eksempel:

Kolonne(
  børn:  [
    Beholder(
      højde: MediaQuery.of (kontekst). størrelse.højde,
      bredde: MediaQuery.of (kontekst). størrelse.width,
      barn: GoogleMap (
        onMapCreated: (GoogleMapController-controller) {},
      ),
    ),
  ],
),

Dette giver os:

En enkel implementering af Google Maps i en Flutter-app

Dette er ret godt til kun et par kodelinjer. Men de fleste gange ønsker vi ikke, at en app skal have et tilfældigt kort. Så lad os se nu, hvordan man tilpasser, styrer kortet, tilføjer markører osv.

Ændring af kortindstillinger

Indstillingsparameteren giver os mulighed for at indstille nogle standardindstillinger, såsom aktivering / deaktivering af bevægelser eller indstilling af standardkamerapositionen osv.

Ændring af korttype

Vi kan indstille korttypen ved hjælp af parameteren mapType i GoogleMapOptions.

Dette kan indstilles til satellit, hybrid, normal eller terræn.

Google kort(
  onMapCreated: (GoogleMapController-controller) {},
  indstillinger: GoogleMapOptions (
    mapType: MapType.satellite,
  ),
),
Skift til satellitvisning

Indstil standard kameraposition

Indstilling af parameteren cameraPosition indstiller standardkamerapositionen til et mål. Vi vil se på dette detaljeret, når vi ser på CameraPosition i det næste afsnit.

indstillinger: GoogleMapOptions (
  cameraPosition: CameraPosition (
    mål: LatLng (37.4219999, -122.0862462),
  ),
),

Viser brugerplacering

Brugerens placering kan vises på kortet ved at indstille myLocationEnabled-parameteren til sand. For at dette kan fungere, skal vi også tilføje de krævede tilladelser på begge platforme.

På Android:

Tilføje

eller

til manifest.xml. Vi er også nødt til eksplicit at bede brugeren om tilladelse.

Til dette kan en pakke som permit_handler bruges til at opnå dette.

På iOS:

Tilføj en 'NSLocationWhenInUseUsageDescription' nøgle til din 'Info.plist' fil. Dette vil automatisk bede brugeren om tilladelser, når kortet prøver at tænde for Min placering.

Brugerens placering vises nu

Hvis alt går godt, skal dette være resultatet.

Aktivering / deaktivering af bevægelser

GoogleMapOptions giver os forskellige muligheder for enten at aktivere eller deaktivere bestemte typer af bevægelser som vippe, zoom osv.

indstillinger: GoogleMapOptions (
  cameraPosition: CameraPosition (
    mål: LatLng (37.4219999, -122.0862462),
  ),
  rotateGesturesEnabled: falsk,
  scrollGesturesEnabled: falsk,
  tiltGesturesEnabled: falsk,
)

Dette kodestykke deaktiverer de tre nævnte bevægelser.

Bevægelse af kameraet

Hvis du bemærkede det, gav onMapCreated-metoden i GoogleMap os en GoogleMapController.

onMapCreated: (GoogleMapController-controller) {},

Vi kan bruge denne controller til at gøre ting som sæt markører eller flytte kameraet rundt.

Lad os se et eksempel på at flytte kameraet til en bestemt placering, f.eks. Google HQ.

// Erklær uden for bygningsmetoden
GoogleMapController mapController;
Stillads(
  krop: kolonne (
    børn:  [
      Beholder(
        højde: MediaQuery.of (kontekst). størrelse.højde,
        bredde: MediaQuery.of (kontekst). størrelse.width,
        barn: GoogleMap (
            onMapCreated: (GoogleMapController-controller) {
              mapController = controller;
            },
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton (onPression: () {
    mapController.animateCamera (
      CameraUpdate.newCameraPosition (
        CameraPosition (
            mål: LatLng (37.4219999, -122.0862462), zoom: 20.0),
      ),
    );
  }),
);

En variabel bruges til at gemme en forekomst af GoogleMapController, så vi kan animere kameraet.

Dernæst har vi en FloatingActionButton og med dens onPressed indstilling til at animere kameraet til Google HQ's breddegrad og længdegrad.

Animerer kameraet til en bestemt breddegrad og længdegrad

Lad os se på alle de andre ting, vi kan gøre med at flytte kameraet.

CameraUpdate.newCameraPosition ()

Denne metode giver os mulighed for at indstille breddegrad og længdegrad, zoom, pejling (kortets orientering i grader) og hældning (en højere hældning giver bygninger en sidevisning / vippevisning). Leje ændrer retningen kameraet peger i og ikke vipper.

mapController.animateCamera (
  CameraUpdate.newCameraPosition (
    CameraPosition (
      mål: latLng,
      hældning: 50,0,
      pejling: 45,0,
      zoom: 20,0,
    ),
  ),
);

Dette giver os:

Brug af .newCameraPosition () til at opdatere kameravisning

CameraUpdate.newLatLngBounds ()

Dette indstiller kameraet mellem to LatLngs.

For eksempel giver det mere mening for en app som Uber at vise nok af kortet til at dække dig og bilen, der har til opgave at hente dig frem for at vise et kort over hele byen.

mapController.animateCamera (
    CameraUpdate.newLatLngBounds (
      LatLngBounds (
        sydvest: LatLng (48.8589507, 2.2770205),
        nordøst: LatLng (50.8550625, 4.3053506),
      ),
      32,0,
    ),
);

Funktionen tager det sydvestlige punkt og det nordøstlige punkt for at dække på kortet.

Den anden parameter er en polstring, lad os se, hvad den gør.

Her er det sydvestlige punkt byen Paris og nordøst er Bruxelles. Lad os indstille polstret til 0.0 og prøv det.

Polstring 0.0

Byerne er næppe synlige. For at undgå dette giver vi kortet en højere polstring for at bringe byerne på kortet.

Polstring 48.0

CameraUpdate.newLatLng ()

Denne funktion indstiller blot kameraet til en ny breddegrad og længdegrad, mens den samme zoomfaktor bevares.

mapController.animateCamera (
  CameraUpdate.newLatLng (
    LængdeBredde (
      37.4219999,
      -122,0862462,
    ),
  ),
);
Kort ruller til ny LatLng men holder zoom konstant

CameraUpdate.newLatLngZoom ()

Dette ligner den sidste funktion, men giver os også mulighed for at ændre zoomfaktoren på kameraet.

mapController.animateCamera (
  CameraUpdate.newLatLngZoom (
    LatLng (37.4219999, -122.0862462),
    10.0, // Zoomfaktor
  ),
);

CameraUpdate.scrollBy ()

Rul blot kortet i X- og / eller Y-retning med et vist beløb.

mapController.animateCamera (
  CameraUpdate.scrollBy (50.0, 50.0),
);

Den første parameter skifter i X-retning, mens den anden giver forskydning i Y-retningen.

CameraUpdate.zoomIn (), CameraUpdate.zoomOut ()

Du zoomer blot ind eller ud.

mapController.animateCamera (
  CameraUpdate.zoomIn (),
);
mapController.animateCamera (
  CameraUpdate.zoomOut (),
);

CameraUpdate.zoomBy ()

Zoomer efter det angivne beløb.

mapController.animateCamera (
  CameraUpdate.zoomBy (4,0),
);

CameraUpdate.zoomTo ()

Zoomer til den specifikke faktor.

mapController.animateCamera (
  CameraUpdate.zoomTo (5,0),
);

Tilføjelse af markører på kortet

Vi kan også bruge den samme GoogleMapController, som vi tidligere har brugt til at tilføje markører på kortet.

Slipper en markør på Googleplex

Dette er så let som:

mapController.addMarker (
  MarkerOptions (
    position: LatLng (37.4219999, -122.0862462),
  ),
);

Tilføjelse af tekst til markører

Vi kan tilføje information til markører ved hjælp af parameteren infoWindowText.

MarkerOptions (
    position: LatLng (37.4219999, -122.0862462),
    infoWindowText: InfoWindowText ("Titel", "Indhold"),
  ),
Føjelse af oplysninger til en markør

Ændring af markørikon

Vi kan ændre det billede, der bruges til markøren ved hjælp af ikonparameteren. Lad os bruge flutterikonet som en markør.

I ikonparameteren kan vi levere et aktiv som dette:

MarkerOptions (
  position: LatLng (37.4219999, -122.0862462),
  ikon: BitmapDescriptor.fromAsset ('images / flutter.png',),
),
Brug af et flagrende ikon som en markør

Ændring af udseendet på standardmarkøren

Vi kan også ændre farve ved hjælp af ikonparameteren:

MarkerOptions (
  position: LatLng (37.4219999, -122.0862462),
  ikon:
      BitmapDescriptor.defaultMarkerWithHue (BitmapDescriptor.hueBlue),
),

Vi kan også indstille alfaen (hvor uigennemsigtigt ikonet er):

MarkerOptions (
  position: LatLng (37.4219999, -122.0862462),
  alfa: 0,5,
),

Og endelig kan vi også rotere ikonet:

MarkerOptions (
  position: LatLng (37.4219999, -122.0862462),
  rotation: 45,0, // Rotation i grader
),
Det er det for denne artikel! Jeg håber, du nød det, og lad et par klapper hvis du gjorde det. Følg mig for flere Flutter-artikler og kommenter for alle feedback, du måtte have om denne artikel.

Mens jeg skrev denne artikel, stødte jeg på et arkiv med ganske mange eksempler af Bhavik Makwana inklusive kort. Tjek det her.

Tjek også mine andre profiler og artikler:

Nogle af mine andre artikler