Проучване на Google Maps във Flutter

Добавяне на официално поддържани Google Maps в приложение Flutter

Наскоро Google публикува официалния плъгин на Google Maps за Flutter, добавяйки официална поддръжка за Google Maps във Flutter.

Тази статия ще разгледа как да добавите Google Maps в проект Flutter и наличните функции и персонализиране. По време на писането този плъгин все още е в преглед на програмист и може да има промени в бъдеще. Ще се опитам да актуализирам статията, когато се налага.

Забележка: Тъй като Google Maps разчита на външен пакет и не е вграден, не съм добавил тази статия като част от моята поредица Deep Dive в джаджи. Въпреки това тази статия ще следва подобен модел.

Настройване на нашето приложение

Преди да започнем, трябва да конфигурираме нашите ключове за API, за да може приложението ни да работи с Google Maps. Общите инструкции са дадени тук в пакета и ги следвайте, за да настроите вашия проект.

Накратко:

  1. Тук създайте ключ за API на Google Maps.
  2. Добавяне на ключ към Android manifest.xml:
<Заявление ...
  

3. Добавете ключ към iOS:

Добавете импортирането на GoogleMaps в Runner -> AppDelegate.m и добавете API ключа. Вашият файл трябва да изглежда така:

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

@implementation AppDelegate

- (BOOL) приложение: (UIApplication *) приложение
    didFinishLaunchingWithOptions: (NSDictionary *) launchOptions {
    [GMSServices предоставятAPIKey: @ "YOUR API KEY"];
  [GeneratedPluginRegistrant registerWithRegistry: self];
  // Точка за отмяна за персонализиране след стартиране на приложението.
  връщане [супер приложение: приложение didFinishLaunchingWithOptions: launchOptions];
}

@край

4. Добавете това към Info.plist

<Ключ> io.flutter.embedded_views_preview 
<Низ> Да 

И вие сте готови!

Добавяне на карта на Google към екран

За да добавите Google Map, използвайте джаджа на GoogleMap във вашето дърво на приспособления. Ето един основен пример:

Колона(
  деца: <Джаджа> [
    Контейнер(
      височина: MediaQuery.of (контекст) .size.height,
      ширина: MediaQuery.of (контекст) .size.width,
      дете: GoogleMap (
        onMapCreate: (Контролер на GoogleMapController) {},
      ),
    ),
  ],
),

Това ни дава:

Проста реализация на Google Maps в приложение Flutter

Това е доста добре само за няколко реда код. Но повечето пъти не искаме приложение да има произволна карта. Така че, нека да видим сега как да персонализирате, контролирате картата, да добавите маркери и т.н.

Промяна на опциите на картата

Параметърът за опции ни позволява да зададем някои настройки по подразбиране като активиране / деактивиране на жестове или настройване на положението на камерата по подразбиране и т.н.

Промяна на типа карта

Можем да зададем типа карта с помощта на параметъра mapType в GoogleMapOptions.

Това може да бъде настроено на сателит, хибрид, нормално или терен.

Гугъл карта(
  onMapCreate: (Контролер на GoogleMapController) {},
  опции: GoogleMapOptions (
    mapType: MapType.satellite,
  ),
),
Преминаване към сателитен изглед

Задайте позицията на камерата по подразбиране

Настройката на параметъра cameraPosition задава позицията на камерата по подразбиране на цел. Ще разгледаме това подробно, когато разгледаме CameraPosition в следващия раздел.

опции: GoogleMapOptions (
  cameraPosition: CameraPosition (
    цел: LatLng (37.4219999, -122.0862462),
  ),
),

Показване на местоположението на потребителя

Местоположението на потребителя може да бъде показано на картата чрез задаване на параметъра myLocationEnabled на true. За да работи това, трябва да добавим и необходимите разрешения на двете платформи.

На Android:

Добави

<употреба-разрешение android: name = ”android.permission.ACCESS_FINE_LOCATION” />

или

<употреба-разрешение android: name = ”android.permission.ACCESS_COARSE_LOCATION” />

да manifest.xml. Също така трябва изрично да поискаме от потребителя разрешение.

За целта може да се използва пакет като разрешение_handler за постигане на това.

В iOS:

Добавете ключ „NSLocationWhenInUseUsageDescription“ към файла си „Info.plist“. Това автоматично ще подкани потребителя за разрешения, когато картата се опита да включи слоя My Location.

Сега се показва местоположението на потребителя

Ако всичко върви добре, това трябва да е резултатът.

Активиране / деактивиране на жестове

GoogleMapOptions ни дава различни опции или да активираме или деактивираме конкретни видове жестове като наклон, увеличение и т.н.

опции: GoogleMapOptions (
  cameraPosition: CameraPosition (
    цел: LatLng (37.4219999, -122.0862462),
  ),
  rotateGesturesEnabled: невярно,
  scrollGesturesEnabled: невярно,
  tiltGesturesEnabled: невярно,
)

Този кодов фрагмент деактивира трите споменати жеста.

Преместване на камерата

Ако забелязахте, методът onMapCreate в GoogleMap ни даде GoogleMapController.

onMapCreate: (Контролер на GoogleMapController) {},

Можем да използваме този контролер, за да правим неща като зададени маркери или да преместваме камерата.

Да видим пример за преместване на камерата до конкретно място, да речем, на щаба на Google.

// Деклариране на метод за изграждане извън
GoogleMapController mapController;
Скеле (
  тяло: колона (
    деца: <Джаджа> [
      Контейнер(
        височина: MediaQuery.of (контекст) .size.height,
        ширина: MediaQuery.of (контекст) .size.width,
        дете: GoogleMap (
            onMapCreate: (Контролер на GoogleMapController) {
              mapController = контролер;
            }
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton (onPress: () {
    mapController.animateCamera (
      CameraUpdate.newCameraPosition (
        CameraPosition (
            цел: LatLng (37.4219999, -122.0862462), увеличение: 20.0),
      ),
    );
  }),
);

Променлива се използва за съхраняване на екземпляр от GoogleMapController, което ни позволява да анимираме камерата.

След това имаме FloatingActionButton и с неговия onPress, за да анимираме камерата до географската ширина и дължина на щаба на Google.

Анимация на камерата до определена ширина и дължина

Нека да разгледаме всички останали неща, които можем да направим с преместването на камерата.

CameraUpdate.newCameraPosition ()

Този метод ни позволява да зададем географската ширина и дължина, мащабиране, лагер (ориентацията на картата в градуси) и наклона (по-голям наклон дава страничен изглед / наклонен изглед на сградите). Лагерът променя посоката, в която камерата сочи и не се накланя.

mapController.animateCamera (
  CameraUpdate.newCameraPosition (
    CameraPosition (
      цел: latLng,
      наклон: 50.0,
      лагер: 45.0,
      увеличение: 20,0,
    ),
  ),
);

Това ни дава:

Използване .newCameraPosition () за актуализиране на изгледа на камерата

CameraUpdate.newLatLngBounds ()

Това настройва камерата между два LatLngs.

Например, има по-голям смисъл приложение като Uber да покаже достатъчно карта, за да ви покрие, а колата има за задача да ви вземе, а не да показва карта на целия град.

mapController.animateCamera (
    CameraUpdate.newLatLngBounds (
      LatLngBounds (
        югозапад: LatLng (48.8589507, 2.2770205),
        североизток: LatLng (50.8550625, 4.3053506),
      ),
      32.0,
    ),
);

Функцията заема югозападната точка и североизточната точка, за да се покрие на картата.

Вторият параметър е подплънка, нека да видим какво прави.

Тук югозападната точка е град Париж, а североизток е Брюксел. Да настроим подплънката на 0,0 и да я изпробваме.

Подплънки 0,0

Градовете почти не се виждат. За да избегнем това, даваме на картата по-висока подплънка, за да изведе градовете в картата.

Подложка 48.0

CameraUpdate.newLatLng ()

Тази функция просто задава камерата на нова географска ширина и дължина, като запазва същия коефициент на увеличение.

mapController.animateCamera (
  CameraUpdate.newLatLng (
    LatLng (
      37.4219999,
      -122,0862462,
    ),
  ),
);
Картата превърта до нов LatLng, но поддържа увеличението постоянно

CameraUpdate.newLatLngZoom ()

Това е подобно на последната функция, но също така ни позволява да променим коефициента на увеличение на камерата.

mapController.animateCamera (
  CameraUpdate.newLatLngZoom (
    LatLng (37.4219999, -122.0862462),
    10.0, // Коефициент на увеличение
  ),
);

CameraUpdate.scrollBy ()

Просто превъртате картата в посока X и / или Y с определено количество.

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

Първият параметър дава изместване в посока X, докато вторият дава изместване в посока Y.

CameraUpdate.zoomIn (), CameraUpdate.zoomOut ()

Просто увеличава или намалява.

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

CameraUpdate.zoomBy ()

Увеличава с дадената сума.

mapController.animateCamera (
  CameraUpdate.zoomBy (4.0),
);

CameraUpdate.zoomTo ()

Мащабиране на конкретния фактор.

mapController.animateCamera (
  CameraUpdate.zoomTo (5.0),
);

Добавяне на маркери на картата

Можем да използваме същия GoogleMapController, който използвахме по-рано, за да добавим маркери и на картата.

Пускане на маркер в Googleplex

Това е толкова лесно, колкото:

mapController.addMarker (
  MarkerOptions (
    позиция: LatLng (37.4219999, -122.0862462),
  ),
);

Добавяне на текст към маркери

Можем да добавим информация към маркери, използвайки параметъра infoWindowText.

MarkerOptions (
    позиция: LatLng (37.4219999, -122.0862462),
    infoWindowText: InfoWindowText ("Заглавие", "Съдържание"),
  ),
Добавяне на информация към маркер

Промяна на иконата на маркер

Можем да променим изображението, което се използва за маркера, като използваме параметъра на иконата. Нека използваме иконата Flutter като маркер.

В параметъра на иконата можем да предоставим актив като този:

MarkerOptions (
  позиция: LatLng (37.4219999, -122.0862462),
  икона: BitmapDescriptor.fromAsset ('images / flutter.png',),
),
Използване на икона Flutter като маркер

Промяна на външния вид на маркера по подразбиране

Можем да променим цвета и чрез параметъра на иконата:

MarkerOptions (
  позиция: LatLng (37.4219999, -122.0862462),
  икона:
      BitmapDescriptor.defaultMarkerWithHue (BitmapDescriptor.hueBlue),
),

Можем да зададем и алфата (колко непрозрачна е иконата):

MarkerOptions (
  позиция: LatLng (37.4219999, -122.0862462),
  алфа: 0,5,
),

И накрая можем да завъртим иконата също:

MarkerOptions (
  позиция: LatLng (37.4219999, -122.0862462),
  въртене: 45.0, // Въртене в градуси
),
Това е за тази статия! Надявам се, че ви е харесало, и оставете няколко хлопки, ако сте го направили. Следвайте ме за още статии на Flutter и коментирайте всякаква обратна връзка, която може да имате относно тази статия.

Докато пишех тази статия, попаднах на хранилище от доста примери от Бхавик Маквана, включително карти. Вижте тук.

Чувствайте се свободни да разгледате и другите ми профили и статии:

Някои от другите ми статии