Добавление официально поддерживаемых Google Maps в приложение Flutter
Google недавно опубликовал официальный плагин Google Maps для Flutter, добавив во Flutter официальную поддержку Google Maps.
В этой статье мы рассмотрим, как добавить Google Maps в проект Flutter, а также о доступных функциях и настройках. На момент написания этот плагин все еще находится в предварительной версии для разработчиков и, возможно, в будущем в него будут внесены критические изменения. Я сделаю все возможное, чтобы обновить статью, когда это потребуется.
Примечание. Поскольку Google Maps использует внешний пакет, а не является встроенным, я не добавлял эту статью как часть моей серии Deep Dive в виджеты. Тем не менее, эта статья будет следовать аналогичной схеме.
Настройка нашего приложения
Прежде чем мы начнем, нам нужно настроить ключи API, чтобы наше приложение работало с Google Maps. Общие инструкции приведены здесь в пакете, следуйте им, чтобы настроить свой проект.
В двух словах:
- Создайте ключ API Карт Google здесь.
- Добавьте ключ в Android
manifest.xml:
<application...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR API KEY"/>
3. Добавьте ключ в iOS:
Добавьте GoogleMaps импорт в Runner - ›AppDelegate.m и добавьте ключ API. Ваш файл должен выглядеть так:
#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GMSServices provideAPIKey:@"YOUR API KEY"];
[GeneratedPluginRegistrant registerWithRegistry:self];
// Override point for customization after application launch.
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
4. Добавьте это в Info.plist.
<key>io.flutter.embedded_views_preview</key> <string>YES</string>
И готово!
Добавление карты Google на экран
Чтобы добавить карту Google, используйте виджет GoogleMap в дереве виджетов. Вот простой пример:
Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: GoogleMap(
onMapCreated: (GoogleMapController controller) {},
),
),
],
),
Это дает нам:
Это довольно хорошо для нескольких строк кода. Но в большинстве случаев мы не хотим, чтобы в приложении была случайная карта. Итак, давайте посмотрим, как настраивать карту, управлять ею, добавлять маркеры и т. Д.
Изменение параметров карты
Параметр options позволяет нам установить некоторые настройки по умолчанию, такие как включение / отключение жестов или установка положения камеры по умолчанию и т. Д.
Смена типа карты
Мы можем установить тип карты с помощью параметра mapType в GoogleMapOptions.
Это может быть спутник, гибрид, нормальный или местность.
GoogleMap(
onMapCreated: (GoogleMapController controller) {},
options: GoogleMapOptions(
mapType: MapType.satellite,
),
),
Установить положение камеры по умолчанию
Установка параметра cameraPosition устанавливает положение камеры по умолчанию на цель. Мы рассмотрим это подробно, когда рассмотрим CameraPosition в следующем разделе.
options: GoogleMapOptions(
cameraPosition: CameraPosition(
target: LatLng(37.4219999, -122.0862462),
),
),
Отображение местоположения пользователя
Местоположение пользователя можно отобразить на карте, установив для параметра myLocationEnabled значение true. Чтобы это работало, мы также должны добавить необходимые разрешения на обеих платформах.
На Android:
Добавлять
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION” />
or
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION” />
к manifest.xml. Нам также необходимо явно запросить у пользователя разрешение.
Для этого можно использовать такой пакет, как permission_handler.
В iOS:
Добавьте ключ ‘NSLocationWhenInUseUsageDescription’ к вашему файлу ‘Info.plist’. Это автоматически запросит у пользователя разрешения, когда карта попытается включить слой Мое местоположение.
Если все пойдет хорошо, это должен быть результат.
Включение / отключение жестов
GoogleMapOptions дает нам различные варианты включения или отключения определенных типов жестов, таких как наклон, масштабирование и т. Д.
options: GoogleMapOptions(
cameraPosition: CameraPosition(
target: LatLng(37.4219999, -122.0862462),
),
rotateGesturesEnabled: false,
scrollGesturesEnabled: false,
tiltGesturesEnabled: false,
)
Этот фрагмент кода отключает три упомянутых жеста.
Перемещение камеры
Если вы заметили, метод onMapCreated в GoogleMap дал нам GoogleMapController.
onMapCreated: (GoogleMapController controller) {},
Мы можем использовать этот контроллер для таких вещей, как установка маркеров или перемещение камеры.
Давайте посмотрим на пример перемещения камеры в определенное место, например, в штаб-квартиру Google.
// Declare outside build method
GoogleMapController mapController;
Scaffold(
body: Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: GoogleMap(
onMapCreated: (GoogleMapController controller) {
mapController = controller;
},
),
],
),
floatingActionButton: FloatingActionButton(onPressed: () {
mapController.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(37.4219999, -122.0862462), zoom: 20.0),
),
);
}),
);
Переменная используется для хранения экземпляра GoogleMapController, что позволяет нам анимировать камеру.
Затем у нас есть FloatingActionButton и onPressed, настроенные для анимации камеры по широте и долготе штаб-квартиры Google.
Давайте посмотрим, что еще мы можем делать, перемещая камеру.
CameraUpdate. newCameraPosition ()
Этот метод позволяет нам установить широту и долготу, масштаб, азимут (ориентацию карты в градусах) и наклон (больший наклон дает вид сбоку / под наклоном на здания). Пеленг изменяет направление камеры, а не наклон.
mapController.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: latLng,
tilt: 50.0,
bearing: 45.0,
zoom: 20.0,
),
),
);
Это дает нам:
CameraUpdate. newLatLngBounds ()
Это устанавливает камеру между двумя LatLngs.
Например, для такого приложения, как Uber, более разумно отображать достаточно карты, чтобы покрыть вас и автомобиль, которому поручено вас подобрать, а не показывать карту всего города.
mapController.animateCamera(
CameraUpdate.newLatLngBounds(
LatLngBounds(
southwest: LatLng(48.8589507, 2.2770205),
northeast: LatLng(50.8550625, 4.3053506),
),
32.0,
),
);
Функция берет точки юго-запад и северо-восток для покрытия на карте.
Второй параметр - это отступ, давайте посмотрим, что он делает.
Здесь юго-запад - город Париж, а северо-восток - Брюссель. Давайте установим отступ на 0,0 и попробуем.
Города почти не видны. Чтобы этого избежать, мы увеличиваем отступ для карты, чтобы на ней отображались города.
CameraUpdate.newLatLng ()
Эта функция просто устанавливает камеру на новую широту и долготу, сохраняя тот же коэффициент масштабирования.
mapController.animateCamera(
CameraUpdate.newLatLng(
LatLng(
37.4219999,
-122.0862462,
),
),
);
CameraUpdate. newLatLngZoom ()
Это похоже на последнюю функцию, но также позволяет нам изменять коэффициент масштабирования камеры.
mapController.animateCamera(
CameraUpdate.newLatLngZoom(
LatLng(37.4219999, -122.0862462),
10.0, // Zoom factor
),
);
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, который мы использовали ранее, чтобы добавить маркеры на карту.
Это очень просто:
mapController.addMarker(
MarkerOptions(
position: LatLng(37.4219999, -122.0862462),
),
);
Добавление текста в маркеры
Мы можем добавить информацию к маркерам с помощью параметра infoWindowText.
MarkerOptions(
position: LatLng(37.4219999, -122.0862462),
infoWindowText: InfoWindowText("Title", "Content"),
),
Изменение значка маркера
Мы можем изменить изображение, используемое для маркера, с помощью параметра icon. Давайте используем значок Flutter в качестве маркера.
В параметре icon мы можем указать такой актив:
MarkerOptions(
position: LatLng(37.4219999, -122.0862462),
icon: BitmapDescriptor.fromAsset('images/flutter.png',),
),
Изменение внешнего вида маркера по умолчанию
Мы также можем изменить цвет с помощью параметра значка:
MarkerOptions(
position: LatLng(37.4219999, -122.0862462),
icon:
BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
),
Мы также можем установить альфа (насколько непрозрачен значок):
MarkerOptions( position: LatLng(37.4219999, -122.0862462), alpha: 0.5, ),
И, наконец, мы можем повернуть значок:
MarkerOptions( position: LatLng(37.4219999, -122.0862462), rotation: 45.0, // Rotation in degrees ),
Вот и все! Надеюсь, вам понравилось, и оставлю пару аплодисментов, если понравилось. Подпишитесь на меня, чтобы увидеть больше статей о Flutter и комментировать любые отзывы об этой статье.
Во время написания этой статьи я наткнулся на репозиторий с довольно большим количеством примеров от Бхавик Маквана, включая карты. Смотрите здесь.
Не стесняйтесь проверять и другие мои профили и статьи:
