Google Mapsin tutkiminen Flutterissa

Lisää virallisesti tuettu Google Maps Flutter-sovellukseen

Google julkaisi äskettäin virallisen Google Maps -laajennuksen Flutterille lisäämällä virallisen Google Maps -tuen Flutteriin.

Tässä artikkelissa tarkastellaan Google Mapsin lisäämistä Flutter-projektiin ja käytettävissä olevia ominaisuuksia ja räätälöintiä. Kirjoittamishetkellä tämä laajennus on edelleen kehittäjän esikatselussa, ja tulevaisuudessa saattaa olla rikkovia muutoksia. Yritän parhaani mukaan päivittää artikkelin tarvittaessa.

Huomaa: Koska Google Maps luottaa ulkoiseen pakettiin eikä ole sisäänrakennettu, en ole lisännyt tätä artikkelia osana Deep Dive -sarjaani widgetteihin. Siitä huolimatta tämä artikkeli noudattaa samanlaista mallia.

Sovelluksen perustaminen

Ennen aloittamista meidän on määritettävä sovellusohjelmamme API-avaimet toimimaan Google Mapsin kanssa. Yleiset ohjeet on annettu tässä paketissa, ja noudata niitä projektin asettamiseksi.

Pähkinänkuoressa:

  1. Luo Google Maps -sovellusliittymäavain tähän.
  2. Lisää avain Android manifest.xml:

3. Lisää avain iOS: iin:

Lisää GoogleMaps-tuonti Runner -> AppDelegate.m -sovellukseen ja lisää API-avain. Tiedostosi pitäisi näyttää tältä:

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

@toimi AppDelegate

- (BOOL) -sovellus: (UIA-sovellus *) -sovellus
    didFinishLaunchingWithOptions: (NSD Dictionary *) launchOptions {
    [GMSS-palvelut tarjoavatAPIKey: @ "SINUN API-AVAIN"];
  [GeneratedPluginRegistrant registerWithRegistry: itse];
  // Ohjauspiste mukauttamiselle sovelluksen käynnistyksen jälkeen.
  paluu [supersovellus: sovellus didFinishLaunchingWithOptions: launchOptions];
}

start- @ end

4. Lisää tämä Info.plist

 io.flutter.embedded_views_preview 
 Kyllä 

Ja olet valmis!

Google Mapsin lisääminen näytölle

Lisää Google Map käyttämällä GoogleMap-widgettiä widget-puussa. Tässä on perus esimerkki:

sarake (
  lapset:  [
    Säiliö (
      korkeus: MediaQuery.of (konteksti) .koko.korkeus,
      leveys: MediaQuery.of (konteksti) .koko.leveys,
      lapsi: GoogleMap (
        onMapCreated: (GoogleMapController-ohjain) {},
      ),
    ),
  ],
),

Tämä antaa meille:

Google Mapsin yksinkertainen toteutus Flutter-sovelluksessa

Tämä on melko hyvä vain muutamalla koodirivillä. Mutta useimmiten emme halua, että sovelluksella olisi satunnainen kartta. Katsotaan nyt, kuinka mukauttaa, hallita karttaa, lisätä merkkejä jne.

Karttavaihtoehtojen muuttaminen

Asetukset-parametrin avulla voimme asettaa joitain oletusasetuksia, kuten eleiden ottamista käyttöön tai poistamista käytöstä tai kameran oletusasennon määrittämistä jne.

Karttatyypin vaihtaminen

Voimme asettaa karttatyypin käyttämällä mapType-parametria GoogleMapOptions-sovelluksessa.

Tämä voidaan asettaa satelliittiin, hybridiin, normaaliin tai maastoon.

Google kartta(
  onMapCreated: (GoogleMapController-ohjain) {},
  vaihtoehdot: GoogleMapOptions (
    mapType: MapType.satellite,
  ),
),
Siirtyminen satelliittinäkymään

Aseta kameran oletusasento

CameraPosition-parametrin asettaminen asettaa kameran oletusasennon kohteeseen. Tarkastelemme tätä yksityiskohtaisesti, kun tarkastelemme seuraavassa osassa olevaa CameraPosition-ohjelmaa.

vaihtoehdot: GoogleMapOptions (
  cameraPosition: CameraPosition (
    kohde: LatLng (37.4219999, -122.0862462),
  ),
),

Näytetään käyttäjän sijainti

Käyttäjän sijainti voidaan näyttää kartalla asettamalla myLocationEnabled-parametrin tosi. Jotta tämä toimisi, meidän on myös lisättävä tarvittavat käyttöoikeudet molemmille alustoille.

Android:

Lisätä

tai

manifest.xml. Meidän on myös pyydettävä käyttäjältä nimenomaisesti lupa.

Tätä varten voidaan käyttää paketti kuten luba_käsittelijä.

IOS:

Lisää 'NSLocationWhenInUseUsageDescription' -avain Info.plist-tiedostoon. Tämä kysyy käyttäjältä automaattisesti lupaa, kun kartta yrittää ottaa käyttöön Oma sijainti -tason.

Käyttäjän sijainti näkyy nyt

Jos kaikki menee hyvin, tämän pitäisi olla tulos.

Eleiden ottaminen käyttöön / poistaminen käytöstä

GoogleMapOptions antaa meille useita vaihtoehtoja joko ottaa käyttöön tai poistaa käytöstä tietyntyyppisiä eleitä, kuten kallistusta, zoomausta jne.

vaihtoehdot: GoogleMapOptions (
  cameraPosition: CameraPosition (
    kohde: LatLng (37.4219999, -122.0862462),
  ),
  rotateGesturesEnabled: false,
  scrollGesturesEnabled: false,
  tiltGesturesEnabled: false,
)

Tämä koodinpätkä poistaa käytöstä mainitut kolme elettä.

Kameran liikuttaminen

Jos huomasit, onMapCreated-menetelmä GoogleMapissa antoi meille GoogleMapController.

onMapCreated: (GoogleMapController-ohjain) {},

Voimme käyttää tätä ohjainta toimiin, kuten asettaa merkit tai siirtää kameraa.

Katsotaanpa esimerkki kameran siirtämisestä tiettyyn sijaintiin, esimerkiksi Google HQ: hon.

// Ilmoita rakennusmenetelmä ulkopuolella
GoogleMapController mapController;
Rakennustelineiden (
  runko: sarake (
    lapset:  [
      Säiliö (
        korkeus: MediaQuery.of (konteksti) .koko.korkeus,
        leveys: MediaQuery.of (konteksti) .koko.leveys,
        lapsi: GoogleMap (
            onMapCreated: (GoogleMapController-ohjain) {
              mapController = ohjain;
            },
      ),
    ],
  ),
  floatingActionButton: floatingActionButton (onPainettu: () {
    mapController.animateCamera (
      CameraUpdate.newCameraPosition (
        CameraPosition (
            kohde: LatLng (37.4219999, -122.0862462), zoom: 20.0),
      ),
    );
  }),
);

Muuttujaa käytetään GoogleMapController-esiintymän tallentamiseen, jotta voimme animoida kameran.

Seuraavaksi meillä on FloatingActionButton ja sen onPressed-asetus asettaa animoimaan kameran Google HQ: n leveys- ja pituusasteelle.

Animoi kamera tietylle leveys- ja pituusasteelle

Katsotaanpa kaikkia muita asioita, joita voimme tehdä kameran siirtämisellä.

CameraUpdate.newCameraPosition ()

Tämän menetelmän avulla voidaan asettaa leveys- ja pituusaste, zoomaus, suunta (kartan suunta asteina) ja kallistus (korkeampi kallistus antaa rakennusten sivukuvan / kallistetun kuvan). Laakeri muuttaa kameran osoittamaa suuntaa eikä kallistu.

mapController.animateCamera (
  CameraUpdate.newCameraPosition (
    CameraPosition (
      kohde: latLng,
      kallistus: 50,0,
      laakeri: 45,0,
      zoom: 20,0,
    ),
  ),
);

Tämä antaa meille:

Kameranäkymän päivittäminen .newCameraPosition () -sovelluksella

CameraUpdate.newLatLngBounds ()

Tämä asettaa kameran kahden LatLng: n väliin.

Esimerkiksi Uberin kaltaisella sovelluksella on järkevämpää näyttää riittävästi karttaa peittämään sinut ja auto, jonka tehtävänä on ottaa sinut, sen sijaan, että näytettäisiin koko kaupungin karttaa.

mapController.animateCamera (
    CameraUpdate.newLatLngBounds (
      LatLngBounds (
        lounaaseen: LatLng (48.8589507, 2.2770205),
        koilliseen: LatLng (50.8550625, 4.3053506),
      ),
      32,0,
    ),
);

Toiminto kattaa lounaispisteen ja koillispisteen kartalla.

Toinen parametri on täyte, katsotaan mitä se tekee.

Täällä lounaispiste on Pariisin kaupunki ja koilliseen on Bryssel. Asetetaan täyte arvoon 0.0 ja kokeillaan sitä.

Täyte 0,0

Kaupungit ovat tuskin näkyviä. Tämän välttämiseksi annamme kartalle korkeamman pehmusteen, jotta kaupungit tuodaan karttaan.

Täyte 48.0

CameraUpdate.newLatLng ()

Tämä toiminto asettaa kameran vain uudelle leveys- ja pituusasteelle säilyttäen samalla zoom-kertoimen.

mapController.animateCamera (
  CameraUpdate.newLatLng (
    LevPit (
      37.4219999,
      -122,0862462,
    ),
  ),
);
Kartta vierii uuteen LatLng, mutta pitää zoomauksen vakiona

CameraUpdate.newLatLngZoom ()

Tämä on samanlainen kuin viimeinen toiminto, mutta antaa meille myös mahdollisuuden muuttaa kameran zoomauskerrointa.

mapController.animateCamera (
  CameraUpdate.newLatLngZoom (
    LatLng (37.4219999, -122.0862462),
    10,0, // Zoomauskerroin
  ),
);

CameraUpdate.scrollBy ()

Selaa karttaa vain tietyn määrän X- ja / tai Y-suunnassa.

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

Ensimmäinen parametri antaa siirtymisen X-suuntaan, kun taas toinen antaa siirtymisen Y-suuntaan.

CameraUpdate.zoomIn (), CameraUpdate.zoomOut ()

Yksinkertaisesti zoomaa sisään tai ulos.

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

CameraUpdate.zoomBy ()

Zoomi annetulla määrällä.

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

CameraUpdate.zoomTo ()

Zoomi tiettyyn tekijään.

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

Markerien lisääminen kartalle

Voimme käyttää samaa GoogleMapControlleria, jota aiemmin käytimme, myös merkintöjen lisäämiseen kartalle.

Merkinnän pudottaminen Googleplexistä

Tämä on yhtä helppoa kuin:

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

Tekstin lisääminen merkkeihin

Voimme lisätä tietoja merkkeihin käyttämällä infoWindowText-parametria.

MarkerOptions (
    asema: LatLng (37.4219999, -122.0862462),
    infoWindowText: InfoWindowText ("Otsikko", "Sisältö"),
  ),
Tietojen lisääminen merkkiin

Markerikuvakkeen vaihtaminen

Voimme muuttaa merkinnässä käytettävän kuvan ikoni-parametrilla. Käytämme Flutter-kuvaketta merkkinä.

Kuvakeparametrissa voimme toimittaa tämänkaltaisen sisällön:

MarkerOptions (
  asema: LatLng (37.4219999, -122.0862462),
  kuvake: BitmapDescriptor.fromAsset ('images / flutter.png',),
),
Käyttämällä Flutter-kuvaketta merkkinä

Oletusmerkin ulkoasun muuttaminen

Voimme muuttaa väriä myös kuvakeparametrilla:

MarkerOptions (
  asema: LatLng (37.4219999, -122.0862462),
  kuvake:
      BitmapDescriptor.defaultMarkerWithHue (BitmapDescriptor.hueBlue),
),

Voimme myös asettaa aakkoset (kuinka läpinäkymätön kuvake on):

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

Ja lopuksi, voimme myös kääntää kuvaketta:

MarkerOptions (
  asema: LatLng (37.4219999, -122.0862462),
  kierto: 45,0, // Pyöritys asteina
),
Se on tämä artikkeli! Toivottavasti nautit siitä, ja jätät muutaman taputuksen, jos teit. Seuraa minua saadaksesi lisää Flutter-artikkeleita ja kommentoidaksesi palautetta, joka sinulla voi olla tästä artikkelista.

Tätä artikkelia kirjoittaessani tapasin arkiston, jossa oli paljon Bhavik Makwanan esimerkkejä, mukaan lukien kartat. Katso täältä.

Tutustu myös muihin profiileihini ja artikkeleihini:

Jotkut muista artikkeleistani