Как добавить API Карт Google во Flutter Web
Я читаю главу 11 «Поваренной книги Флаттера» — второе издание Симоны Алессандрии. Я выполняю следующие шаги:
Создайте новое приложение Flutter и назовите его map_recipe.
flutter pub add google_maps_flutterЯ получил ключ Google Maps API здесь.
Откройте файл
android/app/src/main/AndroidManifest.xmlв своем проекте. Добавьте следующую строку под значком средства запуска в узле приложения:android:icon="@mipmap/ic_launcher">
Установите minSdkVersion в файле
android/app/build.gradle:андроид { defaultConfig { minSdkВерсия 20 } }
Но как это сделать для Интернета?
Полный код можно найти на сайте автора GitHub.
Ответы 3
Для Интернета вам необходимо указать свой ключ Google в поле web/index.html. Он должен находиться внутри тега head.
Документация - https://developers.google.com/maps/flutter-package/config#web
Действия, которые вы выполнили, предназначены для добавления карт Google на платформу Android.
Чтобы добавить Карты Google в свой веб-проект Flutter, вам нужно будет использовать пакет google_maps_flutter_web, и, поскольку он одобрен пакетом google_maps_flutter, вам просто нужно добавить свой ключ API в head ваш web/index.html файл.
Добавьте этот скрипт в свой тег head:
<head>
<script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
Пожалуйста, ознакомьтесь с веб-документацией google_maps_flutter, она доступна там.
Вам нужно будет изменить файл web/index.html вашего веб-приложения Flutter, включив в него Google Maps JS SDK. Проверьте это: https://pub.dev/packages/google_maps_flutter_web
Вам не нужно добавлять эту зависимость в ваш pubspec.yaml, но следуйте его документации. Это поможет вам. Измените тег вашего web/index.html, чтобы загрузить API JavaScript Карт Google, например:
<head>
<!-- // Other stuff -->
<script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
Я надеюсь, что это поможет, и всякий раз, когда вы попытаетесь что-то реализовать. Каждый раз просматривайте документацию.