flutter - 有什么方法可以在 Flutter for Web 中添加谷歌地图？

Question

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

Answer 1

首先，您需要 Google Map api key 。在初始化之前，你必须在你的谷歌云平台中有一个项目。如果没有，请创建一个。



接下来，搜索“Javascript Map”并启用它。否则，api键会报错，说谷歌地图服务没有激活。



在我们的 index.html 中初始化 google map js sdk位于 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

以下是创建谷歌地图小部件的方法。

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 创建平台 View

更多关于 google_maps 包在这里找到:

https://pub.dev/packages/google_maps

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

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

希望这可以帮助。谢谢