如何在Flutter Web项目中集成Google Maps库

插件基础信息 #

用于Flutter Web的Google Maps官方适配插件是google_maps_flutter_web，它是google_maps_flutter多端插件的Web实现，基于Google Maps JavaScript API封装，支持Web端的地图渲染、交互及各类地图功能。

集成前置准备 #

你需要先获取Google Maps API密钥：

• 在Google Cloud控制台创建项目，启用Maps JavaScript API服务
• 生成API密钥（建议设置密钥的使用限制，避免被盗用）

集成步骤 #

1. 在项目的pubspec.yaml中添加依赖：

   dependencies:
     google_maps_flutter_web: ^0.5.4 # 替换为最新版本
   

2. 执行命令安装依赖：

   flutter pub get
   

3. 在web/index.html的<head>标签中引入Google Maps JS脚本（替换为你的API密钥），确保脚本在main.dart.js之前加载：

   <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥"></script>
   

核心用法示例 #

以下是一个基础的地图实现示例，包含初始化、初始相机位置、标记添加：

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前注册Web端地图插件
  GoogleMapsFlutterWeb.registerWith();
  runApp(const MyMapApp());
}

class MyMapApp extends StatelessWidget {
  const MyMapApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter Web 谷歌地图')),
        body: GoogleMap(
          // 初始相机位置：设置坐标和缩放级别
          initialCameraPosition: const CameraPosition(
            target: LatLng(31.2304, 121.4737), // 上海坐标
            zoom: 11,
          ),
          // 地图创建完成后的回调
          onMapCreated: (GoogleMapController controller) {
            // 可在此处执行地图初始化操作，比如移动相机、添加图层等
          },
          // 添加标记
          markers: {
            const Marker(
              markerId: MarkerId('shanghai'),
              position: LatLng(31.2304, 121.4737),
              infoWindow: InfoWindow(title: '上海市', snippet: '中国经济中心'),
            )
          },
          // 启用缩放控件
          zoomControlsEnabled: true,
        ),
      ),
    );
  }
}

核心功能文档梳理 #

• 地图交互控制：可通过zoomControlsEnabled、mapToolbarEnabled控制缩放控件、地图工具栏的显示；通过onTap、onLongPress监听地图点击、长按事件
• 标记与图层：支持添加自定义图标标记、多边形（Polygon）、折线（Polyline）、圆形（Circle），可设置样式及交互事件
• 相机控制：通过GoogleMapController可动态移动相机、改变缩放级别、设置地图边界
• 样式自定义：通过mapStyle属性传入JSON格式的自定义样式，修改地图的配色、元素显示（比如隐藏道路、调整建筑颜色）

内容的提问来源于stack exchange，提问作者Md. Rakibul Hassan