一、插件介绍

google_maps_flutter 是 Flutter 官方提供的地图组件插件，它允许开发者在 Flutter 应用中集成 Google Maps 功能。该插件提供了丰富的地图交互能力和自定义选项，支持多种地图类型、标记、多边形、多段线、圆等地理元素的展示与交互。

主要功能特性

1. 多种地图类型支持：普通地图、卫星地图、混合地图等
2. 地图交互控制：缩放、平移、旋转、倾斜等
3. 地理元素绘制：标记（Marker）、多段线（Polyline）、多边形（Polygon）、圆（Circle）等
4. 相机控制：动画移动、定位、视角调整
5. 地图事件监听：点击、长按、相机移动等
6. 自定义样式：支持自定义地图样式
7. 性能优化：支持 Lite 模式，适合列表等场景

适用场景

• 位置服务应用
• 导航类应用
• 基于位置的社交应用
• 地图数据可视化
• 商业地理分析应用

二、插件安装与配置

由于鸿蒙平台使用的是自定义修改版本的 google_maps_flutter 包，需要以 git 形式引入依赖。

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖配置：

dependencies:
  google_maps_flutter:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/google_maps_flutter/google_maps_flutter"

然后执行 flutter pub get 命令安装依赖：

flutter pub get

2. 获取 Google Maps API Key

使用 Google Maps 服务需要先获取 API Key：

1. 访问 Google Cloud Console
2. 创建或选择项目
3. 启用 “Maps SDK for Android” 和 “Maps SDK for iOS”
4. 创建 API Key
5. 配置 API Key 限制（可选但推荐）

3. 鸿蒙平台配置

API Key 配置

在鸿蒙应用中，需要在项目配置文件中添加 API Key。具体配置方式可能因鸿蒙版本而异，建议参考鸿蒙平台的官方文档。

权限配置

在 config.json 文件中添加必要的权限：

"reqPermissions": [
  {
    "name": "ohos.permission.LOCATION",
    "reason": "获取位置信息以显示当前位置"
  },
  {
    "name": "ohos.permission.INTERNET",
    "reason": "访问 Google Maps 服务"
  }
]

三、API 调用与使用示例

1. 基本地图展示

以下是在鸿蒙应用中使用 google_maps_flutter 显示基本地图的示例：

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

class GoogleMapExample extends StatefulWidget {
  const GoogleMapExample({Key? key}) : super(key: key);

  @override
  State<GoogleMapExample> createState() => _GoogleMapExampleState();
}

class _GoogleMapExampleState extends State<GoogleMapExample> {
  // 地图控制器
  final Completer<GoogleMapController> _controller = Completer();

  // 初始相机位置（Googleplex）
  static const CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid, // 混合地图类型
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        myLocationEnabled: true, // 显示当前位置
        myLocationButtonEnabled: true, // 显示定位按钮
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToMyLocation,
        label: const Text('我的位置'),
        icon: const Icon(Icons.location_on),
      ),
    );
  }

  // 跳转到当前位置
  Future<void> _goToMyLocation() async {
    // 这里需要结合定位服务获取当前位置
    // 以下示例使用固定坐标
    const CameraPosition currentLocation = CameraPosition(
      target: LatLng(37.43296265331129, -122.08832357078792),
      zoom: 18.0,
    );

    final GoogleMapController controller = await _controller.future;
    await controller.animateCamera(CameraUpdate.newCameraPosition(currentLocation));
  }
}

2. 添加标记（Marker）

// 在 State 类中定义标记集合
Set<Marker> _markers = {};

// 定义标记数据
final Marker _berkeleyMarker = Marker(
  markerId: const MarkerId('berkeley'),
  position: const LatLng(37.8716, -122.2727),
  infoWindow: const InfoWindow(
    title: '加利福尼亚大学伯克利分校',
    snippet: '世界顶尖公立研究型大学',
  ),
  icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
);

// 在 GoogleMap 组件中添加 markers 属性
GoogleMap(
  // ... 其他属性
  markers: _markers,
)

// 在适当的时机添加标记
void _addMarker() {
  setState(() {
    _markers.add(_berkeleyMarker);
  });
}

3. 绘制多段线（Polyline）

// 在 State 类中定义多段线集合
Set<Polyline> _polylines = {};

// 定义多段线数据
final Polyline _polyline = Polyline(
  polylineId: const PolylineId('route'),
  points: const <LatLng>[
    LatLng(37.42796133580664, -122.085749655962),
    LatLng(37.43296265331129, -122.08832357078792),
    LatLng(37.43196265331129, -122.09132357078792),
  ],
  width: 5,
  color: Colors.red,
  jointType: JointType.round,
  endCap: Cap.roundCap,
);

// 在 GoogleMap 组件中添加 polylines 属性
GoogleMap(
  // ... 其他属性
  polylines: _polylines,
)

// 在适当的时机添加多段线
void _addPolyline() {
  setState(() {
    _polylines.add(_polyline);
  });
}

4. 绘制多边形（Polygon）

// 在 State 类中定义多边形集合
Set<Polygon> _polygons = {};

// 定义多边形数据
final Polygon _polygon = Polygon(
  polygonId: const PolygonId('university'),
  points: const <LatLng>[
    LatLng(37.8688, -122.2705),
    LatLng(37.8729, -122.2667),
    LatLng(37.8738, -122.2715),
    LatLng(37.8698, -122.2753),
  ],
  strokeWidth: 2,
  strokeColor: Colors.green,
  fillColor: Colors.green.withOpacity(0.3),
);

// 在 GoogleMap 组件中添加 polygons 属性
GoogleMap(
  // ... 其他属性
  polygons: _polygons,
)

// 在适当的时机添加多边形
void _addPolygon() {
  setState(() {
    _polygons.add(_polygon);
  });
}

5. 绘制圆（Circle）

// 在 State 类中定义圆集合
Set<Circle> _circles = {};

// 定义圆数据
final Circle _circle = Circle(
  circleId: const CircleId('campus'),
  center: const LatLng(37.8716, -122.2727),
  radius: 1000, // 半径，单位：米
  strokeWidth: 2,
  strokeColor: Colors.purple,
  fillColor: Colors.purple.withOpacity(0.2),
);

// 在 GoogleMap 组件中添加 circles 属性
GoogleMap(
  // ... 其他属性
  circles: _circles,
)

// 在适当的时机添加圆
void _addCircle() {
  setState(() {
    _circles.add(_circle);
  });
}

6. 地图事件监听

GoogleMap(
  // ... 其他属性
  onTap: (LatLng position) {
    print('地图点击位置: $position');
    // 可以在此处添加标记或执行其他操作
  },
  onLongPress: (LatLng position) {
    print('地图长按位置: $position');
  },
  onCameraMove: (CameraPosition position) {
    print('相机移动: ${position.target}, 缩放: ${position.zoom}');
  },
  onCameraIdle: () {
    print('相机移动结束');
  },
)

7. 自定义地图样式

// 加载自定义地图样式
Future<void> _loadMapStyle(GoogleMapController controller) async {
  // 从 assets 加载样式文件
  String style = await rootBundle.loadString('assets/map_style.json');
  await controller.setMapStyle(style);
}

// 在 onMapCreated 回调中调用
onMapCreated: (GoogleMapController controller) {
  _controller.complete(controller);
  _loadMapStyle(controller);
},

三、鸿蒙平台注意事项

1. API Key 配置

鸿蒙平台需要正确配置 Google Maps API Key，确保地图服务能够正常访问。

2. 网络权限

确保应用已获得网络访问权限，否则地图无法加载。

3. 位置权限

如果需要使用定位功能，确保应用已获得位置权限。

4. 性能优化

• 对于列表等场景，推荐使用 Lite 模式
• 避免同时绘制过多的地理元素
• 合理使用地图控制器，避免频繁操作

5. 兼容性处理

• 鸿蒙平台可能需要额外的适配代码
• 注意处理不同屏幕尺寸的适配
• 测试不同鸿蒙版本的兼容性

四、总结

google_maps_flutter 是一个功能强大的地图组件，为 Flutter 应用提供了丰富的地图功能支持。在鸿蒙平台上，通过使用自定义修改版本的包，开发者可以轻松集成 Google Maps 功能，构建各种基于位置的应用。

使用该插件可以快速实现：

• 美观的地图展示
• 丰富的地理元素绘制
• 流畅的地图交互体验
• 自定义的地图样式
• 基于位置的服务功能

通过正确配置和使用 google_maps_flutter 包，开发者可以在鸿蒙 Flutter 项目中构建出具有专业地图功能的应用，提升用户体验和应用价值。