有什么方法可以在 Flutter for Web 中添加 Google 地图？

Question

我正在探索 flutter-web 并想在其中添加谷歌地图。虽然，我在 flutter-app 中使用 google_maps_flutter 使用了谷歌地图，但这适用于 Android 和 iOS。

Answer 1

首先，您需要 Google Map api 密钥。在初始化之前，您必须在 Google Cloud Platform 中拥有一个项目。如果您没有，请创建一个。

接下来，搜索“Javascript Map”并启用它。否则，api 密钥会发出错误消息，表示未激活 google 地图服务。

在我们index.html位于web项目树文件夹内的文件中初始化 google map js sdk 。

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

并在文件中导入google_mapspubspec.yaml：

dependencies:
  google_maps: ^3.4.1

这是您创建谷歌地图小部件的方法。

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 元素的唯一 ID

ui.platformViewRegistry.registerViewFactory - 在 dart 中创建一个 webview

LatLng(1.3521, 103.8198) - 获取位置纬度和经度的类

DivElement() - 创建潜水元素的类

GMap - 创建一个谷歌地图元素

Marker() - 在谷歌地图的 LatLng 中显示的红色图标

HtmlElementView() - 为 Flutter Web 创建平台视图

有关 google_maps 包的更多信息，请参见此处：

https://pub.dev/packages/google_maps

关于如何使用它的快速教程可以在这里找到：

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

希望这可以帮助。谢谢

Answer 2

最近发布了一个新的官方插件：https : //pub.dev/packages/google_maps_flutter_web。它已经适用于现有的 google_maps_flutter 插件，只需在web/index.html. 现在请注意它的局限性 - 没有旋转，没有地图工具栏，没有我的位置功能。