Flutter谷歌地图辅助插件google_maps_helper的使用

google_maps_helper 是一个扩展了 google_maps_flutter 的Flutter包，提供了包括地点自动补全文本框、绘制折线、地理编码和反向地理编码等在内的必要功能。

特性

• 集成了所有Google地图的功能于一个包中
• 提供了用于Google地点搜索的自动补全文本框
• 在Google地图上绘制折线
• 地理编码：从地址获取地理坐标
• 反向地理编码：从地理坐标获取地址
• 不需要单独引入 google_maps_flutter 包
• 易于使用且高度可定制

开始使用

• 查看 google_maps_flutter 的设置说明。
• 从2.0.0版本开始，此包使用新的“Places API”进行地址搜索，请确保在你的Google Cloud项目中启用了新的“Places API”。

使用方法

Google地点自动补全文本框

Widget get _searchField {
  return GmhSearchField(
    selectedValue: _address,
    onSelected: (data) => _address = data,
    searchParams: GmhSearchParams(apiKey: '<GOOGLE_PLACES_API_NEW_KEY>'),
  );
}

使用搜索函数创建自己的自动补全功能

await GmhService().searchAddress(
  text: 'califor',
  params: GmhSearchParams(apiKey: '<GOOGLE_PLACES_API_NEW_KEY>'),
).listen((data) {
  // 在你的UI中显示这个列表
  print(data.length);
});

Google地图小部件

GoogleMapController? _controller;
final _kSrc = CameraPosition(
    target: LatLng(37.4165849896396, -122.08051867783071),
);
final _kDest = CameraPosition(
    target: LatLng(37.420921119071586, -122.08535335958004),
);

Widget get _map {
  return GmhMap(
    mapOptions: GmhMapOptions(
      mapType: MapType.normal,
      initialCameraPosition: _kSrc,
      onTap: (pos) => _getAddress(pos),
      minMaxZoomPreference: MinMaxZoomPreference(15, 18),
      onMapCreated: (controller) => _controller = controller,
      markers: {
        Marker(markerId: MarkerId('src'), position: _kSrc.target),
        Marker(markerId: MarkerId('dest'), position: _kDest.target),
      },
    ),
    polylineOptions: GmhPolylineOptions(
      geodesic: true,
      color: Colors.blue,
      optimizeWaypoints: true,
      apiKey: '<GOOGLE_DIRECTIONS_API_KEY>',
    ),
  );
}

地理编码

Future<void> _getGeocode(String address) async {
  final data = await GmhService().getGeocode(
    address: address,
    apiKey: '<GOOGLE_GEOCODING_API_KEY>',
  );
  print('${data?.lat},${data?.lng}');
}

反向地理编码

Future<void> _getAddress(LatLng pos) async {
  final data = await GmhService().getAddress(
    lat: pos.latitude,
    lng: pos.longitude,
    apiKey: '<GOOGLE_GEOCODING_API_KEY>',
  );
  print(data?.address);
}

示例代码

下面是一个完整的示例，展示了如何集成google_maps_helper到你的应用中：

// ignore_for_file: unused_field
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_helper/google_maps_helper.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  GmhAddressData? _address;
  GoogleMapController? _controller;

  final _kSrc = CameraPosition(
    zoom: 18,
    target: LatLng(37.4165849896396, -122.08051867783071),
  );

  final _kDest = CameraPosition(
    zoom: 15,
    target: LatLng(37.420921119071586, -122.08535335958004),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Google Maps Helper')),
        body: SafeArea(child: Stack(children: [_map, _searchField])),
      ),
    );
  }

  /// Google map widget
  Widget get _map {
    return GmhMap(
      mapOptions: GmhMapOptions(
        mapType: MapType.normal,
        initialCameraPosition: _kSrc,
        onTap: (pos) => _getAddress(pos),
        minMaxZoomPreference: MinMaxZoomPreference(15, 18),
        onMapCreated: (controller) => _controller = controller,
        markers: {
          Marker(markerId: MarkerId('src'), position: _kSrc.target),
          Marker(markerId: MarkerId('dest'), position: _kDest.target),
        },
      ),
      polylineOptions: GmhPolylineOptions(
        geodesic: true,
        color: Colors.blue,
        optimizeWaypoints: true,
        apiKey: '<GOOGLE_DIRECTIONS_API_KEY>',
      ),
    );
  }

  /// Auto-complete places search field
  Widget get _searchField {
    return GmhSearchField(
      selectedValue: _address,
      onSelected: (data) => _address = data,
      searchParams: GmhSearchParams(apiKey: '<GOOGLE_PLACES_API_KEY>'),
    );
  }

  /// REVERSE GEOCODING: Get address from geocode
  Future<void> _getAddress(LatLng pos) async {
    final data = await GmhService().getAddress(
      lat: pos.latitude,
      lng: pos.longitude,
      apiKey: '<GOOGLE_GEOCODING_API_KEY>',
    );
    if (kDebugMode) print(data?.address);
    if (data != null) _getGeocode(data.address);
  }

  /// GEOCODING: Get geocode from an address
  Future<void> _getGeocode(String address) async {
    final data = await GmhService().getGeocode(
      address: address,
      apiKey: '<GOOGLE_GEOCODING_API_KEY>',
    );
    if (kDebugMode) print('${data?.lat},${data?.lng}');
  }
}