有啥方法可以在 Flutter for Web 中添加谷歌地图？
Posted
技术标签:
【中文标题】有啥方法可以在 Flutter for Web 中添加谷歌地图？【英文标题】：Any way to add Google Maps in Flutter for Web?有什么方法可以在 Flutter for Web 中添加谷歌地图？ 【发布时间】：2019-12-03 16:46:49 【问题描述】：我正在探索 Flutter-web 并想在其中添加谷歌地图。虽然，我在 Flutter-app 中使用 google_maps_flutter 使用了谷歌地图，但这适用于 android 和 ios。
【问题讨论】：
我在这里发布了一个解决方案：***.com/a/57488553/3268303 这个解决方案比较简单：***.com/a/57746754/3268303 这能回答你的问题吗？ How to use the Google Maps library with Flutter Web? 【参考方案1】：首先，您需要 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
希望这会有所帮助。谢谢
【讨论】：
地图上出现“仅供开发者使用”的水印，有什么办法可以去掉吗？【参考方案2】：最近发布了一个新的官方插件：https://pub.dev/packages/google_maps_flutter_web。它已经适用于现有的 google_maps_flutter 插件，只需在 web/index.html 中添加您的 api 脚本。现在请注意它的限制 - 没有旋转，没有地图工具栏，没有我的位置功能。
【讨论】：
有没有办法为所有支持的平台（web、android、ios）获得相同的 api？单独的 web 插件违背了 Flutter 承诺的多平台功能。如果我只想要 Web，我不需要 Flutter @user1209216 到目前为止，它还没有被谷歌地图插件认可，所以它需要依赖。 Check readme.虽然我自己没试过，但也许你可以尝试使用webview。【参考方案3】：要将 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,
),
),
),
);
【讨论】：
【参考方案4】：我还没有测试过，但如果你想要一个跨平台的解决方案，也许你可以试一试：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.
【讨论】：
以上是关于有啥方法可以在 Flutter for Web 中添加谷歌地图？的主要内容，如果未能解决你的问题，请参考以下文章
Flutter + Firebase Auth：有啥方法可以在 Web 上使用 Firebase 电话身份验证重新发送短信验证码？
有啥方法可以用 Provider 在 Flutter 中全局登录学生吗？
Flutter Mobile 或 Web 应用程序之间有啥区别？