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

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

1. 介绍

google_maps_webapi 是一个用于 Dart 的库，提供了对 Google Maps Web Services 的访问。通过这个库，您可以在 Flutter 应用中轻松集成 Google 地图的各种功能，如地理编码、地点搜索、路线规划等。

2. API Key

要使用 google_maps_webapi，您需要一个 Web API 密钥。请按照以下步骤获取适用于您的 Dart 应用的 API 密钥：

• 登录 Google Cloud Console
• 创建一个新的项目或选择现有的项目
• 启用 Google Maps Web Services API（如 Geocoding API、Places API 等）
• 生成一个 Web API 密钥

请注意，这些密钥不能单独用作 Android 或 iOS API 密钥，而是专门用于 Dart 应用。

3. 可用的 API

以下是 google_maps_webapi 支持的 API 列表：

• ✅ Geocoding API：将地址转换为地理坐标或将地理坐标转换为地址。
• ✅ Places API：支持附近搜索、文本搜索、详情查询、照片、自动补全等功能。
• ✅ Directions API：获取两个地点之间的路线信息。
• ✅ Distance Matrix API：计算多个起点和终点之间的距离和时间。
• ✅ Timezone API：根据地理位置获取时区信息。
• ✅ Static Map API：生成静态地图图像。

4. 使用示例

4.1 地理编码 (Geocoding)

import 'package:google_maps_webapi/geocoding.dart';

void main() async {
  // 初始化 Geocoding API
  final geocoding = GoogleMapsGeocoding(apiKey: "YOUR_API_KEY");

  // 根据地址获取地理坐标
  GeocodingResponse response = await geocoding.searchByAddress("1600 Amphitheatre Parkway, Mountain View, CA");

  // 打印结果
  print(response.results);
}

4.2 地点搜索 (Places)

import 'package:google_maps_webapi/places.dart';

void main() async {
  // 初始化 Places API
  final places = GoogleMapsPlaces(apiKey: "YOUR_API_KEY");

  // 搜索附近的地点
  PlacesSearchResponse nearbyResponse = await places.searchNearbyWithRadius(Location(lat: 37.7749, lng: -122.4194), 500);

  // 打印结果
  print(nearbyResponse.results);

  // 根据地点 ID 获取详细信息
  PlacesDetailsResponse detailsResponse = await places.getDetailsByPlaceId("PLACE_ID");

  // 打印结果
  print(detailsResponse.result);
}

4.3 路线规划 (Directions)

import 'package:google_maps_webapi/directions.dart';

void main() async {
  // 初始化 Directions API
  final directions = GoogleMapsDirections(apiKey: "YOUR_API_KEY");

  // 获取从旧金山到洛杉矶的路线
  DirectionsResponse response = await directions.getDirections(
    origin: Location(lat: 37.7749, lng: -122.4194),
    destination: Location(lat: 34.0522, lng: -118.2437),
  );

  // 打印结果
  print(response.routes);
}

4.4 时区查询 (Timezone)

import 'package:google_maps_webapi/timezone.dart';

void main() async {
  // 初始化 Timezone API
  final timezone = GoogleMapsTimezone(apiKey: "YOUR_API_KEY");

  // 根据地理位置获取时区信息
  TimezoneResponse response = await timezone.getByLocation(Location(lat: 37.7749, lng: -122.4194));

  // 打印结果
  print(response.timeZoneId);
}

4.5 静态地图 (Static Map)

import 'package:google_maps_webapi/staticmap.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化 Static Map
    StaticMap mapStatic = StaticMap(
      apiKey: "YOUR_API_KEY",
      markers: List.from([
        Location(lat: 37.7749, lng: -122.4194),
        Location(lat: 34.0522, lng: -118.2437),
      ]),
      path: Path(
        enc: 'svh~F`j}uOusC`bD',
        color: 'black',
      ),
      scale: 'false',
    );

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

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Static Map Example')),
        body: Center(
          child: Image.network(url),
        ),
      ),
    );
  }
}

5. 代理设置

如果您需要通过代理服务器访问 Google Maps API，可以通过设置 baseUrl 来实现。API 密钥可以由代理服务器提供，从而避免在应用中存储 API 密钥。

final geocoding = GoogleMapsGeocoding(baseUrl: "http://myProxy.com");