Flutter谷歌地图集成插件flutter_google_map_sal的使用

Flutter谷歌地图集成插件flutter_google_map_sal的使用

获取开始

本项目是一个新的Flutter插件项目。该插件项目包含适用于Android和/或iOS的平台特定实现代码。

对于Flutter的入门帮助，可以查看我们的在线文档，其中提供了教程、示例、移动开发指导以及完整的API参考。

该项目是在未指定--platforms标志的情况下生成的，目前不支持任何平台。要添加平台，请在相同目录下运行以下命令：

flutter create -t plugin --platforms <platforms> .

您也可以在pubspec.yaml文件中找到如何添加平台的详细说明。

完整示例代码

以下是使用flutter_google_map_sal插件的完整示例代码：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_api_headers/google_api_headers.dart';
import 'package:flutter_google_map_sal/flutter_google_map_sal.dart';
import 'package:google_maps_webservice/places.dart';
import 'package:uuid/uuid.dart';

const kGoogleApiKey = 'YOUR_API_KEY'; // 请替换为您的实际API密钥

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

final customTheme = ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.dark,
  colorScheme: ColorScheme.fromSwatch(
    primarySwatch: Colors.blue,
    brightness: Brightness.dark,
    accentColor: Colors.redAccent,
  ),
  inputDecorationTheme: const InputDecorationTheme(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4.00)),
    ),
    contentPadding: EdgeInsets.symmetric(
      vertical: 12.50,
      horizontal: 10.00,
    ),
  ),
);

class RoutesWidget extends StatelessWidget {
  const RoutesWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的应用',
      theme: customTheme,
      routes: {
        '/': (_) => const MyApp(),
        '/search': (_) => CustomSearchScaffold(),
      },
    );
  }
}

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

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

class _MyAppState extends State<MyApp> {
  Mode _mode = Mode.overlay;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的应用'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildDropdownMenu(),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: _handlePressButton,
              child: const Text('搜索地点'),
            ),
            const SizedBox(height: 12),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushNamed('/search');
              },
              child: const Text('自定义'),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDropdownMenu() {
    return DropdownButton<Mode>(
      value: _mode,
      items: const [
        DropdownMenuItem<Mode>(
          value: Mode.overlay,
          child: Text('覆盖层模式'),
        ),
        DropdownMenuItem<Mode>(
          value: Mode.fullscreen,
          child: Text('全屏模式'),
        ),
      ],
      onChanged: (m) {
        if (m != null) {
          setState(() => _mode = m);
        }
      },
    );
  }

  Future<void> _handlePressButton() async {
    void onError(PlacesAutocompleteResponse response) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(response.errorMessage ?? '未知错误'),
        ),
      );
    }

    // 显示输入自动完成，并选择模式
    // 然后获取选中的Prediction
    final p = await PlacesAutocomplete.show(
      context: context,
      apiKey: kGoogleApiKey,
      onError: onError,
      mode: _mode,
      language: 'fr',
      components: [Component(Component.country, 'fr')],
    );

    await displayPrediction(p, ScaffoldMessenger.of(context));
  }
}

Future<void> displayPrediction(Prediction? p, ScaffoldMessengerState messengerState) async {
  if (p == null) {
    return;
  }

  // 获取详细信息（纬度/经度）
  final _places = GoogleMapsPlaces(
    apiKey: kGoogleApiKey,
    apiHeaders: await const GoogleApiHeaders().getHeaders(),
  );

  final detail = await _places.getDetailsByPlaceId(p.placeId!);
  final geometry = detail.result.geometry!;
  final lat = geometry.location.lat;
  final lng = geometry.location.lng;

  messengerState.showSnackBar(
    SnackBar(
      content: Text('${p.description} - $lat/$lng'),
    ),
  );
}

// 自定义搜索框架
// 基本上您的小部件需要扩展 [GooglePlacesAutocompleteWidget]
// 并且您的状态需要扩展 [GooglePlacesAutocompleteState]
class CustomSearchScaffold extends PlacesAutocompleteWidget {
  CustomSearchScaffold({Key? key})
      : super(
          key: key,
          apiKey: kGoogleApiKey,
          sessionToken: const Uuid().v4(),
          language: 'en',
          components: [Component(Component.country, 'uk')],
        );

  [@override](/user/override)
  _CustomSearchScaffoldState createState() => _CustomSearchScaffoldState();
}

class _CustomSearchScaffoldState extends PlacesAutocompleteState {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const AppBarPlacesAutoCompleteTextField(
          textStyle: null,
          textDecoration: null,
          cursorColor: null,
        ),
      ),
      body: PlacesAutocompleteResult(
        onTap: (p) => displayPrediction(p, ScaffoldMessenger.of(context)),
        logo: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [FlutterLogo()],
        ),
      ),
    );
  }

  [@override](/user/override)
  void onResponseError(PlacesAutocompleteResponse response) {
    super.onResponseError(response);

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(response.errorMessage ?? '未知错误')),
    );
  }

  [@override](/user/override)
  void onResponse(PlacesAutocompleteResponse response) {
    super.onResponse(response);

    if (response.predictions.isNotEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('收到回复')),
      );
    }
  }
}