Есть ли способ добавить GOOGLE MAPS inf FLUTTER WEB?

Я изучаю флаттер-веб и хочу добавить в него карту Google. Хотя я использовал карту Google с помощью google_maps_flutter в приложении flutter-app, но это работает для Android и iOS.

Источник

4 ответа

Во-первых, вам понадобятся ключи API Google Map. Перед инициализацией у вас должен быть проект в вашей облачной платформе Google. Создайте его, если у вас его нет.

Затем найдите "Карта Javascript" и включите ее. В противном случае ключ api выдаст сообщение об ошибке, в котором говорится, что картографический сервис Google не активирован.

Инициализируем google map js sdk в нашем index.html файл, расположенный внутри web папка вашего дерева проекта.

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>"></script>

И импортируйте google_maps вpubspec.yaml файл:

dependencies:
  google_maps: ^3.4.1

А вот как вы создаете виджет карты Google.

import 'dart:html';
import 'package:flutter/material.dart';
import 'package:google_maps/google_maps.dart';
import 'dart:ui' as ui;

Widget getMap() {
  String htmlId = "7";

  // ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
    final myLatlng = LatLng(1.3521, 103.8198);

    final mapOptions = MapOptions()
      ..zoom = 10
      ..center = LatLng(1.3521, 103.8198);

    final elem = DivElement()
      ..id = htmlId
      ..style.width = "100%"
      ..style.height = "100%"
      ..style.border = 'none';

    final map = GMap(elem, mapOptions);

    Marker(MarkerOptions()
      ..position = myLatlng
      ..map = map
      ..title = 'Hello World!'
      );

    return elem;
  });

  return HtmlElementView(viewType: htmlId);
}

htmlId - уникальный идентификатор для имени элемента div

ui.platformViewRegistry.registerViewFactory - создает веб-просмотр в dart

LatLng(1.3521, 103.8198) - класс, который принимает широту и долготу местоположения

DivElement() - класс для создания дайв-элемента

GMap - создает элемент карты Google

Marker() - красный значок, который отображается в вашем LatLng на карте Google

HtmlElementView() - создает представление платформы для Flutter Web

Подробнее о пакете google_maps можно найти здесь:

https://pub.dev/packages/google_maps

Краткое руководство по его использованию можно найти здесь:

https://dev.to/happyharis/flutter-web-google-maps-381a

Надеюсь это поможет. Спасибо

Источник

Недавно был выпущен новый официальный плагин: https://pub.dev/packages/google_maps_flutter_web. Он уже работает с существующим плагином google_maps_flutter, просто добавьте свой скрипт api в web/index.html. Обратите внимание на его ограничения на данный момент - нет поворота, нет панели инструментов карты, нет функции моего местоположения.

Источник

Чтобы добавить ключ API в веб-приложение, отредактируйте index.htmlфайл в web. Добавьте ссылку на сценарий JavaScript для Карт в разделе заголовка с вашим ключом API.

      <head>
  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="google_maps_in_flutter">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- TODO: Add your Google Maps API key here -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE"></script>

  <title>google_maps_in_flutter</title>
  <link rel="manifest" href="manifest.json">
</head>

Теперь пришло время получить карту на экране. Обновлять lib/main.dartследующим образом:.

      import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late GoogleMapController mapController;

  final LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
          ),
        ),
      ),
    );
  }
}
Источник

Я еще не тестировал его, но если вам нужно кросс-платформенное решение, возможно, вы можете попробовать: https://pub.dev/packages/flutter_google_maps

Источник
Другие вопросы по тегам