我正在探索 Flutter-web 并想在其中添加谷歌地图。虽然，我在 Flutter-app 中使用 google_maps_flutter 使用了谷歌地图，但这适用于 Android 和 iOS。
【问题讨论】：
标签： flutter flutter-web google-maps-flutter
首先，您需要 Google Map api 密钥。在初始化之前，你必须在你的谷歌云平台中有一个项目。如果没有，请创建一个。
接下来，搜索“Javascript Map”并启用它。否则，api键会报错，说谷歌地图服务没有激活。
在我们位于项目树的web 文件夹内的index.html 文件中初始化google map js sdk。
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>"></script>
并在pubspec.yaml文件中导入google_maps：
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
希望这会有所帮助。谢谢
【讨论】：
最近发布了一个新的官方插件：https://pub.dev/packages/google_maps_flutter_web。它已经适用于现有的 google_maps_flutter 插件，只需在 web/index.html 中添加您的 api 脚本。现在请注意它的限制 - 没有旋转，没有地图工具栏，没有我的位置功能。
【讨论】：
要将 API 密钥添加到 Web 应用程序，请编辑 web 中的 index.html 文件。使用您的 API 密钥在 head 部分添加对 Maps JavaScript 脚本的引用。
<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
它的描述是：
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.
【讨论】：