Flutter 有没有办法在Flitter for Web中添加谷歌地图？

我正在探索颤振网络，并希望在其中添加谷歌地图。虽然我在flutt应用程序中使用了google-map和google-maps-flutt，但这对Android和iOS都有效。

首先，你需要google-map的api键。在初始化之前，你必须在你的谷歌云平台上有一个项目。如果没有，就创建一个

接下来，搜索“Javascript映射”并启用它。否则，api键将显示一个错误，表明google地图服务未激活

在项目树的

web

文件夹中的

index.html

文件中初始化google map js sdk

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

下面是如何创建GoogleMap小部件的

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.3521103.8198）

-获取位置纬度和经度的类

DivElement（）

-类创建一个潜水元素

GMap

-创建谷歌地图元素

Marker（）

-在谷歌地图中显示的红色图标

HtmlElementView（）

-为颤振Web创建平台视图

有关google_maps软件包的更多信息，请参见：

有关如何使用它的快速教程可在此处找到：

---

希望这有帮助。谢谢

我还没有测试过它，但是如果你想要一个跨平台的解决方案，也许你可以试一试：

它的描述是：

A Flutter plugin for integrating Google Maps in iOS, Android and Web applications. It is a wrapper of google_maps_flutter for Mobile and google_maps for Web.

---

最近发布了一个新的官方插件：。它已经可以与现有的google_maps_Flatter插件一起使用，只需在

web/index.html

中添加api脚本即可。现在一定要注意它的局限性——没有旋转，没有地图工具栏，没有我的位置功能。

我在这里发布了一个解决方案：这个解决方案更简单：这能回答你的问题吗？是否有任何方法可以为所有受支持的平台（web、android、ios）获得相同的api？单独的web插件是针对Flatter承诺的多平台功能的。如果我只想要网络，我不需要为网络而颤栗that@user1209216到目前为止，它还没有被认可为谷歌地图插件，所以它需要依赖性。虽然我自己还没有试过，也许你可以试着使用webview。不起作用，试过alreadyA“仅供开发者使用”水印出现在地图上，有没有办法删除它？

A Flutter plugin for integrating Google Maps in iOS, Android and Web applications. It is a wrapper of google_maps_flutter for Mobile and google_maps for Web.