Flutter谷歌地图网络服务插件flutter_google_maps_webservices的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter谷歌地图网络服务插件flutter_google_maps_webservices的使用

General Information

flutter_google_maps_webservices 是一个用于访问Google Maps Web Services的Dart库。你可以在这里找到 Google Maps Platform Documentation，如果你是初学者，可以从这里开始了解。

API Key

要使用这个库，你需要一个 Web API key。按照这些步骤获取适用于你特定Dart应用的API key。请注意，这些key不是单独作为Android或iOS API key使用的，而是专门为你Dart应用程序准备的。

Available APIs

以下是此库支持的API列表：

Usage

下面是如何使用该库的一些示例代码。

Geocoding 示例

import "package:flutter_google_maps_webservices/geocoding.dart";

void main() async {
  final geocoding = GoogleMapsGeocoding(apiKey: "<API_KEY>");
  GeocodingResponse response = await geocoding.searchByAddress("1600 Amphitheatre Parkway, Mountain View, CA");
  print(response.results?.first.formattedAddress);
}

Places 示例

import "package:flutter_google_maps_webservices/places.dart";

void main() async {
  final places = GoogleMapsPlaces(apiKey: "<API_KEY>");
  PlacesSearchResponse response = await places.searchNearbyWithRadius(Location(lat: 31.0424, lng: 42.421), 500);
  print(response.results?.first.name);
}

Timezone 示例

import "package:flutter_google_maps_webservices/timezone.dart";

void main() async {
  final timezone = GoogleMapsTimezone(apiKey: "<API_KEY>");
  TimezoneResponse response = await timezone.getByLocation(Location(lat: 31.0424, lng: 42.421));
  print(response.timeZoneId);
}

Static Map 示例

import "package:flutter_google_maps_webservices/staticmap.dart";
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final apiKey = "<API_KEY>";
    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'
    );

    String url = mapStatic.getUrl();

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

Proxy

如果需要使用代理，可以设置baseUrl。在这种情况下，不需要在应用中存储apiKey（不在应用中存储apiKey是一个好的实践）。

Feature Requests and Issues

请在issue tracker提交功能请求和问题。

Examples

更多例子可以在GitHub仓库中的example文件夹下找到，包括但不限于以下内容：

希望这些信息能帮助你更好地理解和使用flutter_google_maps_webservices插件！如果有任何疑问或需要进一步的帮助，请随时提问。


更多关于Flutter谷歌地图网络服务插件flutter_google_maps_webservices的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter谷歌地图网络服务插件flutter_google_maps_webservices的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 flutter_google_maps_webservices 插件在 Flutter 应用中集成谷歌地图网络服务的示例代码。这个插件允许你访问谷歌地图的地理编码、方向、距离矩阵和地点详情等服务。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_google_maps_webservices 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_google_maps_webservices: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，配置你的 Google Maps API 密钥。你可以在 Google Cloud Platform 上创建一个项目并启用相关的 Maps API，然后获取一个 API 密钥。将这个密钥添加到你的 Flutter 应用中，可以通过环境变量的方式，或者在开发阶段硬编码（注意：生产环境中应避免硬编码敏感信息）。

以下是一个简单的示例，展示如何使用 flutter_google_maps_webservices 进行地理编码（将地址转换为经纬度）：

import 'package:flutter/material.dart';
import 'package:flutter_google_maps_webservices/geocoding.dart';
import 'package:flutter_google_maps_webservices/models/geocoding_response.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Google Maps Web Services Example'),
        ),
        body: Center(
          child: GeocodingExample(),
        ),
      ),
    );
  }
}

class GeocodingExample extends StatefulWidget {
  @override
  _GeocodingExampleState createState() => _GeocodingExampleState();
}

class _GeocodingExampleState extends State<GeocodingExample> {
  String _address = '1600 Amphitheatre Parkway, Mountain View, CA';
  String _result = '';
  final Geocoding _geocoding = Geocoding(apiKey: 'YOUR_API_KEY'); // 替换为你的API密钥

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TextField(
          decoration: InputDecoration(labelText: 'Enter Address'),
          onChanged: (value) {
            setState(() {
              _address = value;
            });
          },
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _geocodeAddress,
          child: Text('Geocode Address'),
        ),
        SizedBox(height: 20),
        Text(
          _result,
          style: TextStyle(fontSize: 18),
        ),
      ],
    );
  }

  Future<void> _geocodeAddress() async {
    try {
      GeocodingResponse response = await _geocoding.geocodeAddress(_address);
      if (response.results.isNotEmpty) {
        setState(() {
          _result = 'Latitude: ${response.results.first.geometry.location.lat}, Longitude: ${response.results.first.geometry.location.lng}';
        });
      } else {
        setState(() {
          _result = 'No results found.';
        });
      }
    } catch (e) {
      setState(() {
        _result = 'Error: ${e.message}';
      });
    }
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，用户可以在文本框中输入地址，然后点击按钮进行地理编码。结果会显示在屏幕上，包括转换后的纬度和经度。

请注意，你需要将 'YOUR_API_KEY' 替换为你从 Google Cloud Platform 获取的实际 API 密钥。

这个示例展示了如何使用 flutter_google_maps_webservices 插件进行地理编码。类似地，你可以使用插件中的其他功能，如方向服务、距离矩阵服务和地点详情服务，具体可以参考插件的官方文档和示例代码。

回到顶部