有什么办法可以在Flutter中为Web添加谷歌地图吗？
[英]Any way to add Google Maps in Flutter for Web?
问题描述
I am exploring flutter-web and want to add google map in it.
我正在探索 flutter-web 并想在其中添加 google map。 Although, I have used google map using google_maps_flutter in flutter-app but that works for Android and iOS.虽然，我在 flutter-app 中使用 google_maps_flutter 使用了 google map，但这适用于 Android 和 iOS。
3 个解决方案
解决方案1
15 2020-02-18 06:10:26
First, you need the Google Map api keys.首先，您需要 Google Map api 密钥。 Before initializing, you have to have a project in your Google Cloud Platform.在初始化之前，您必须在 Google Cloud Platform 中拥有一个项目。 Create one if you don't have one.如果您没有，请创建一个。
Next, search for "Javascript Map" and enable it.接下来，搜索“Javascript Map”并启用它。 Otherwise, the api key will shout an error that says the google map service is not activated.否则，api 密钥会发出错误消息，表示未激活 google 地图服务。
Initialize the google map js sdk in our index.html file located inside web folder of your project tree.在位于项目树的web文件夹内的index.html文件中初始化 google map js sdk。
<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>"></script>
And import google_maps in pubspec.yaml file:并在pubspec.yaml文件中导入google_maps ：
dependencies:
google_maps: ^3.4.1
And here is how you create a google map widget.这是您创建谷歌地图小部件的方法。
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 - a unique id to name the div element htmlId - 用于命名 div 元素的唯一 ID
ui.platformViewRegistry.registerViewFactory - creates a webview in dart ui.platformViewRegistry.registerViewFactory - 在 dart 中创建一个 webview
LatLng(1.3521, 103.8198) - class that takes latitude and longitude of a location LatLng(1.3521, 103.8198) - 获取位置纬度和经度的类
DivElement() - class to create a dive element DivElement() - 创建潜水元素的类
GMap - creates a google map element GMap - 创建一个谷歌地图元素
Marker() - the red icon that shows in your LatLng in google map Marker() - 在谷歌地图的 LatLng 中显示的红色图标
HtmlElementView() - creates a platform view for Flutter Web HtmlElementView() - 为 Flutter Web 创建平台视图
More about google_maps package found here :有关 google_maps 包的更多信息，请参见此处：
https://pub.dev/packages/google_maps https://pub.dev/packages/google_maps
A quick tutorial on how to use it found here :关于如何使用它的快速教程可以在这里找到：
https://dev.to/happyharis/flutter-web-google-maps-381a https://dev.to/happyharis/flutter-web-google-maps-381a
Hope this helps.希望这可以帮助。 Thanks谢谢
解决方案2
8 2020-09-13 23:42:32
A new official plugin has been released recently: https://pub.dev/packages/google_maps_flutter_web .最近发布了一个新的官方插件： https : //pub.dev/packages/google_maps_flutter_web 。 It already works with the existing google_maps_flutter plugin, just add your api script in the web/index.html .它已经适用于现有的 google_maps_flutter 插件，只需在web/index.html添加您的 api 脚本。 Do take note its limitations for now - no rotation, no map toolbar, no my location function.现在请注意它的局限性 - 没有旋转，没有地图工具栏，没有我的位置功能。
解决方案3
0 2022-01-18 03:33:14
To add an API key to the Web app, edit the index.html file in web .要将 API 密钥添加到 Web 应用程序，请编辑web中的index.html文件。 Add a reference to the Maps JavaScript script in the head section, with your API key.使用您的 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>
Now it's time to get a map on the screen.现在是时候在屏幕上显示地图了。 Update lib/main.dart as follows:.更新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
0 2022-01-25 02:44:18
您可以按照将 Google 地图添加到 Flutter 应用程序代码实验室。
解决方案5
-1 2020-04-24 19:57:26
I haven't tested it yet but if you want a cross-platform solution maybe you can give this a shot: https://pub.dev/packages/flutter_google_maps我还没有测试过，但如果你想要一个跨平台的解决方案，也许你可以试一试： https : //pub.dev/packages/flutter_google_maps
Its description says:它的描述说：
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.
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.