Flutter网页版谷歌地图集成插件google_maps_flutter_web的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter网页版谷歌地图集成插件google_maps_flutter_web的使用

google_maps_flutter_web

google_maps_flutter_web是google_maps_flutter的网页实现。它由a14n的google_maps Dart JS互操作层提供支持。

使用方法

添加依赖

此包被推荐，这意味着你可以像往常一样使用google_maps_flutter。这个包将自动包含在你的应用程序中，因此你不需要将其添加到pubspec.yaml中。但是，如果你需要直接使用它的API，则应该像往常一样将其添加到pubspec.yaml中。

修改web/index.html

获取一个Google Maps JavaScript API的API Key。你可以从这里开始。

修改web/index.html文件中的<head>标签以加载Google Maps JavaScript API，如下所示：

<head>
  <!-- // Other stuff -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>

如果你的应用程序需要drawing库（用于在地图上绘制多边形、矩形、折线、圆或标记），可以这样包含它：

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>

请求多个库时，用逗号分隔它们：

<script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing,visualization,places">
</script>

现在你应该能够正常使用Google Maps插件了。

Marker聚类

如果你需要Marker聚类支持，修改<head>标签以加载js-markerclusterer库。确保你使用的是当前支持的版本2.5.3，如下所示：

<head>
  <!-- // Other stuff -->
  <script src="https://cdn.jsdelivr.net/npm/@googlemaps/markerclusterer@2.5.3/dist/index.umd.min.js"></script>
</head>

热力图

要使用热力图，可以在URL末尾添加&libraries=visualization。更多信息请参阅文档。

网页版的限制

  • 地图无法旋转，因此以下选项不可用：
    • compassEnabled
    • rotateGesturesEnabled
    • tiltGesturesEnabled
  • 网页版没有“地图工具栏”，所以mapToolbarEnabled选项未被使用。
  • 网页版目前没有“我的位置”小部件，因此以下选项被忽略：
    • myLocationButtonEnabled
    • myLocationEnabled
  • 网页版不支持defaultMarkerWithHue。如果你需要彩色图钉/标记，可能需要使用自己的资产图像。
  • 室内和建筑图层在网页上仍然不可用。交通信息是可以使用的。
  • 只有Android支持“Lite Mode”，因此不能在Web应用程序中将liteModeEnabled构造函数参数设置为true。
  • Google Maps for web使用HtmlElementView来渲染地图。当GoogleMap位于其他小部件下方时，必须使用package:pointer_interceptor捕获Flutter覆盖层上的鼠标事件。详见问题#73830。

支持的热力图选项

Field Supported
Heatmap.dissipating ✓
Heatmap.maxIntensity ✓
Heatmap.minimumZoomIntensity x
Heatmap.maximumZoomIntensity x
HeatmapGradient.colorMapSize x

示例代码

下面是一个简单的示例，展示了如何在Flutter Web项目中使用google_maps_flutter_web插件：

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(const MyApp());
}

/// App for testing
class MyApp extends StatefulWidget {
  /// Constructor with key
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Google Maps Demo'),
        ),
        body: GoogleMap(
          mapType: MapType.normal,
          initialCameraPosition: _kGooglePlex,
          onMapCreated: (GoogleMapController controller) {
            print("Map Created");
          },
        ),
      ),
    );
  }
}

请注意，你需要替换YOUR_API_KEY为你自己的Google Maps API密钥，并根据需要调整地图的初始位置和其他配置。


更多关于Flutter网页版谷歌地图集成插件google_maps_flutter_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter网页版谷歌地图集成插件google_maps_flutter_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter Web应用中集成google_maps_flutter_web插件的详细步骤和代码示例。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加google_maps_flutter_web的依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.x.x  # 确保版本兼容web
  google_maps_flutter_web: ^0.x.x  # 替换为最新版本号

2. 配置Web支持

确保你的flutter项目已经配置了Web支持。如果还没有，可以通过以下命令添加：

flutter config --enable-web

3. 配置Google Maps API密钥

为了使用Google Maps，你需要一个API密钥。你可以通过Google Cloud Platform获取。

  • 访问Google Cloud Console
  • 创建一个新的项目或选择现有项目
  • 启用Google Maps JavaScript API和Google Maps Places API（如果需要）
  • 创建API密钥并记录下来

然后，在你的web/index.html文件中添加以下JavaScript代码来配置API密钥：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Flutter App</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

将YOUR_API_KEY替换为你实际的API密钥。

4. 编写Flutter代码

在你的Flutter应用中，创建一个新的页面或修改现有的页面来使用Google Maps。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GoogleMapPage(),
    );
  }
}

class GoogleMapPage extends StatefulWidget {
  @override
  _GoogleMapPageState createState() => _GoogleMapPageState();
}

class _GoogleMapPageState extends State<GoogleMapPage> {
  late GoogleMapController _controller;
  final LatLng _center = LatLng(37.7749, -122.4194); // 旧金山

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Flutter Web'),
      ),
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 14.0,
        ),
        onMapCreated: (GoogleMapController controller) {
          _controller = controller;
        },
        markers: Set<Marker>.of([
          Marker(
            markerId: MarkerId('marker_id_1'),
            position: _center,
          ),
        ]),
      ),
    );
  }
}

5. 运行应用

确保你已经连接了一个支持Web的设备（通常是Chrome），然后运行应用：

flutter run -d chrome

这将启动Chrome浏览器并显示你的Flutter Web应用，其中集成了Google Maps。

注意事项

  • 确保你的API密钥没有IP限制或限制为你的开发机器/服务器的IP。
  • 如果你在生产环境中使用Google Maps，请确保你已经为API密钥设置了适当的计费。
  • 始终遵循Google Maps服务的使用条款和隐私政策。

以上就是在Flutter Web应用中集成google_maps_flutter_web插件的详细步骤和代码示例。希望这对你有帮助！

回到顶部