10

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

4

4 回答 4

16

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

在此处输入图像描述

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

在此处输入图像描述

index.html在我们位于web项目树文件夹内的文件中初始化 google map js sdk 。

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

并在文件中导入google_mapspubspec.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 创建平台视图

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

https://pub.dev/packages/google_maps

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

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

希望这可以帮助。谢谢

于 2020-02-18T06:10:26.270 回答
9

最近发布了一个新的官方插件：https ://pub.dev/packages/google_maps_flutter_web 。它已经适用于现有的 google_maps_flutter 插件，只需将您的 api 脚本添加到web/index.html. 现在请注意它的限制 - 没有旋转，没有地图工具栏，没有我的位置功能。

于 2020-09-13T23:42:32.293 回答
0

要将 API 密钥添加到 Web 应用程序，请index.html编辑web. 使用您的 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,
          ),
        ),
      ),
    );
  }
}
于 2022-01-18T03:33:14.847 回答
-1

我还没有测试过，但如果你想要一个跨平台的解决方案，也许你可以试一试：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.
于 2020-04-24T19:57:26.457 回答