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

google_maps_pro

google_maps_pro 是一个用于在 Flutter 应用中集成谷歌地图的新插件。

获取开始

这个项目是一个用于 Flutter 的插件包的起点，这种插件包包含针对 Android 和/或 iOS 的平台特定实现代码。

要开始使用 Flutter，请查看我们的在线文档，其中提供了教程、示例、移动开发指南以及完整的 API 参考。

使用示例

以下是一个完整的示例，展示如何在 Flutter 中使用 google_maps_pro 插件来集成谷歌地图。

示例代码

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_json_view/flutter_json_view.dart';
import 'package:google_maps_pro/google_maps_pro.dart';
import 'package:google_maps_pro/model/components_filter.dart';
import 'package:google_maps_pro/model/geocode_response.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TextEditingController _query = TextEditingController();

  TextEditingController _latlong = TextEditingController();

  late GoogleMapsPro _googleMapsPro;

  ///您的谷歌地图 API 密钥
  String apiKey = 'GOOGLE API KEY';

  List<Results> _geocodeResponse = <Results>[];

  [@override](/user/override)
  void initState() {
    super.initState();

    _googleMapsPro = GoogleMapsPro(apiKey);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Maps Pro 示例'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 自动完成地址搜索
              AutoCompleteAddressSearch(
                apiKey: apiKey,
                geocodeResponse: (Results? geoResults) {
                  setState(() {
                    if (geoResults != null) _geocodeResponse.add(geoResults);
                  });
                },
                disableLogo: false,
              ),
              SizedBox(height: 16.0),
              // 输入邮政编码并获取地址
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Flexible(
                    child: TextField(
                      controller: _query,
                      keyboardType: TextInputType.number,
                      decoration: InputDecoration(
                          hintText: '输入邮政编码',
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8.0))),
                    ),
                  ),
                  Flexible(
                    child: ElevatedButton(
                        onPressed: () async {
                          print(_query.text);
                          if (_query.text.length == 6) {
                            _geocodeResponse =
                                (await _googleMapsPro.getMapDataBy(
                                        componentsFilter: ComponentsFilter(
                                            postalCode: _query.text)))
                                    .results!;
                          }

                          setState(() {});
                        },
                        child: Text('获取地址')),
                  ),
                ],
              ),
              SizedBox(height: 16.0),
              // 输入经纬度并获取地址
              TextField(
                controller: _latlong,
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                    hintText: '搜索经纬度，例如：79.580167,20.634550',
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8.0))),
              ),
              ElevatedButton(
                  onPressed: () async {
                    print(_latlong.text.contains(','));
                    List<String> splittedLatLng = _latlong.text.split(',');
                    _geocodeResponse = (await _googleMapsPro.getMapDataBy(
                            lat: splittedLatLng.first,
                            lng: splittedLatLng.last))
                        .results!;

                    setState(() {});
                  },
                  child: Text('获取地址')),
              // 打开底部弹出框搜索地址
              ElevatedButton(
                  onPressed: () async {
                    showSearchBottomSheet(context, (result) {
                      if (result != null) _geocodeResponse.add(result);
                      setState(() {});
                    });
                  },
                  child: Text('在底部弹出框中搜索地址')),
              SizedBox(height: 16.0),
              // 搜索结果展示
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  '搜索结果',
                  style: TextStyle(fontSize: 18.0),
                ),
              ),
              SingleChildScrollView(
                physics: ClampingScrollPhysics(),
                padding: const EdgeInsets.all(16.0),
                child: SingleChildScrollView(
                  physics: AlwaysScrollableScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  child: JsonView.string(json.encode(_geocodeResponse)),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  // 显示底部弹出框
  Future<void> showSearchBottomSheet(
      BuildContext context, Function(Results?) result) async {
    await showModalBottomSheet<void>(
        context: context,
        isScrollControlled: true,
        isDismissible: false,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16.0),
            topRight: Radius.circular(16.0),
          ),
        ),
        builder: (context) {
          return StatefulBuilder(
              builder: (BuildContext context, StateSetter setState) {
            return Padding(
              padding: EdgeInsets.only(
                  left: 16.0,
                  top: 16.0,
                  right: 16.0,
                  bottom: MediaQuery.of(context).viewInsets.bottom + 16.0),
              child: AutoCompleteAddressSearch(
                apiKey: apiKey,
                geocodeResponse: (Results? results) {
                  setState(() {
                    Future.delayed(const Duration(milliseconds: 1000), () {
                      setState(() {
                        result(results);
                      });

                      Navigator.pop(context);
                    });
                  });
                },
                disableLogo: false,
              ),
            );
          });
        });
  }
}