Flutter谷歌地图Web服务插件googlemaps_flutter_webservices的使用

Flutter谷歌地图Web服务插件googlemaps_flutter_webservices的使用

一般信息

这是Google Maps Web服务的Dart库。您可以在这里找到Google Maps平台文档，如果您是初学者，可以先从这里开始。

API密钥

要使用此库，您需要一个Web API密钥。请按照这些步骤获取与您的特定Dart应用程序相关的密钥。

这些密钥不能单独用于Android或iOS API密钥，而是应该在您的Dart应用程序中使用。

可用API

• ✅ 地理编码
• ❌ 地点
  • ✅ 附近搜索
  • ✅ 文本搜索
  • ✅ 详情
  • ❌ 添加
  • ❌ 删除
  • ✅ 图片
  • ✅ 自动完成
  • ✅ 查询自动完成
• ✅ 方向
• ✅ 距离矩阵
• ❌ 地理定位
• ❌ 海拔
• ❌ 道路
• ✅ 时区
• ✅ 静态地图

使用方法

地理编码

import "package:flutter_google_maps_webservices/geocoding.dart";

final geocoding = GoogleMapsGeocoding(apiKey: "<API_KEY>");
final geocoding = GoogleMapsGeocoding(apiKey: "<API_KEY>", httpClient: BrowserClient());
final geocoding = GoogleMapsGeocoding(baseUrl: "http://myProxy.com");

GeocodingResponse response = await geocoding.searchByAddress("1600 Amphitheatre Parkway, Mountain View, CA");

地点

import "package:flutter_google_maps_webservices/places.dart";

final places = GoogleMapsPlaces(apiKey: "<API_KEY>");
final places = GoogleMapsPlaces(apiKey: "<API_KEY>", httpClient: BrowserClient());
final places = GoogleMapsPlaces(baseUrl: "http://myProxy.com");

PlacesSearchResponse response = await places.searchNearbyWithRadius(Location(lat: 31.0424, lng: 42.421), 500);
PlacesSearchResponse response = await places.searchNearbyWithRankby(Location(lat: 31.0424, lng: 42.421), "distance");
PlacesSearchResponse response = await places.searchByText("123 Main Street");

PlacesDetailsResponse response = await places.getDetailsByPlaceId("PLACE_ID");
PlacesDetailsResponse response = await places.getDetailsByReference("REF");

时区

import "package:flutter_google_maps_webservices/timezone.dart";

final timezone = GoogleMapsTimezone(apiKey: "<API_KEY>");
final timezone = GoogleMapsTimezone(apiKey: "<API_KEY>", httpClient: BrowserClient());
final timezone = GoogleMapsTimezone(baseUrl: "http://myProxy.com");

TimezoneResponse response = await timezone.getByLocation(Location(lat: 31.0424, lng: 42.421));
TimezoneResponse response = await timezone.getByLocation(Location(lat: 31.0424, lng: 42.421), timestamp: DateTime.utc(2019, 4, 24));
TimezoneResponse response = await timezone.getByLocation(Location(lat: 31.0424, lng: 42.421), timestamp: DateTime.utc(2019, 4, 24), language: 'es');

静态地图

import "package:flutter_google_maps_webservices/staticmap.dart";

// 创建静态地图对象
StaticMap mapStatic = StaticMap(
  apiKey,
  markers: List.from([
    Location(lat: 23.721160, lng: 90.394435),
    Location(lat: 23.732322, lng: 90.385142),
  ]),
  path: Path(
    enc: 'svh~F`j}uOusC`bD', // 编码后的路径
    color: 'black',
  ),
  scale: 'false'
);

// 获取地图URL
String url = mapStatic.getUrl();

// 显示地图
Image.network(url)

代理

如果使用代理，可以通过设置baseUrl来实现。如果代理设置了apiKey，则apiKey不是必需的。（不在应用中存储apiKey是一个好实践）

功能请求和问题

请在问题跟踪器提交功能请求和问题。

完整示例Demo

以下是一个完整的示例代码，演示如何使用googlemaps_flutter_webservices插件：

import 'package:flutter/material.dart';
import 'package:flutter_google_maps_webservices/geocoding.dart';
import 'package:flutter_google_maps_webservices/places.dart';
import 'package:flutter_google_maps_webservices/timezone.dart';
import 'package:flutter_google_maps_webservices/staticmap.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

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

class _HomeScreenState extends State<HomeScreen> {
  String _geocodingResult = '';
  String _timezoneResult = '';
  String _staticMapUrl = '';

  final geocoding = GoogleMapsGeocoding(apiKey: "<API_KEY>");
  final timezone = GoogleMapsTimezone(apiKey: "<API_KEY>");
  final staticMap = StaticMap("<API_KEY>");

  [@override](/user/override)
  void initState() {
    super.initState();
    fetchGeocodingData();
    fetchTimezoneData();
    fetchStaticMapData();
  }

  Future<void> fetchGeocodingData() async {
    try {
      final response = await geocoding.searchByAddress("1600 Amphitheatre Parkway, Mountain View, CA");
      setState(() {
        _geocodingResult = response.results.first.geometry.location.toString();
      });
    } catch (e) {
      setState(() {
        _geocodingResult = e.toString();
      });
    }
  }

  Future<void> fetchTimezoneData() async {
    try {
      final response = await timezone.getByLocation(Location(lat: 31.0424, lng: 42.421));
      setState(() {
        _timezoneResult = response.timeZoneId;
      });
    } catch (e) {
      setState(() {
        _timezoneResult = e.toString();
      });
    }
  }

  Future<void> fetchStaticMapData() async {
    try {
      staticMap.markers = List.from([
        Location(lat: 23.721160, lng: 90.394435),
        Location(lat: 23.732322, lng: 90.385142),
      ]);
      staticMap.path = Path(
        enc: 'svh~F`j}uOusC`bD',
        color: 'black',
      );
      setState(() {
        _staticMapUrl = staticMap.getUrl();
      });
    } catch (e) {
      setState(() {
        _staticMapUrl = e.toString();
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Web Services Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Text('Geocoding Result: $_geocodingResult'),
            SizedBox(height: 16),
            Text('Timezone Result: $_timezoneResult'),
            SizedBox(height: 16),
            _staticMapUrl.isNotEmpty
                ? Image.network(_staticMapUrl)
                : CircularProgressIndicator(),
          ],
        ),
      ),
    );
  }
}