Flutter地图服务插件google_maps_apis的使用

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

Flutter 地图服务插件 google_maps_apis 的使用

General Information

google_maps_apis 是一个用于 Google Maps Web Services 的 Dart 库。你可以在这里找到 Google Maps 平台文档，如果你是新手，建议从这里开始学习：Google Maps 入门。

Note:

这是一个来自优秀包 google_maps_webservice 的分支，原包已停止维护。感谢 @lejard-h 提供的这个包。

API Key

要使用此库，你需要一个 Web API 密钥。请按照这些步骤获取适用于你的 Dart 应用程序的密钥：获取 API 密钥。

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

Available APIs

Usage

Geocoding

import "package:google_maps_apis/geocoding.dart";

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

Places

import "package:google_maps_apis/places.dart";

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

Timezone

import "package:google_maps_apis/timezone.dart";

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

Static Map

import "package:google_maps_apis/staticmap.dart";

void main() {
  final apiKey = "<API_KEY>";
  final 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'
  );

  final url = mapStatic.getUrl();
  print(url);

  // 在 Flutter 中显示静态地图
  // Image.network(url);
}

Proxy

如果需要使用代理，可以设置 baseUrl。在这种情况下，代理可以设置 API 密钥（不在应用中存储 API 密钥是一个好习惯）。

Feature Requests and Issues

请在 GitHub 问题跟踪器上提交功能请求和错误报告。

示例代码

以下是一些示例代码，展示了如何使用 google_maps_apis：

希望这些信息对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用google_maps_apis插件来实现基本地图功能的代码示例。这个示例将展示如何初始化地图、设置初始位置以及处理一些基本的地图事件（如点击事件）。

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

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.x.x  # 请注意版本号，使用最新版本

然后，运行flutter pub get来安装依赖。

接下来，你需要获取一个Google Maps API密钥，并在你的Google Cloud项目中启用相应的API（如Google Maps Places API、Geocoding API等，根据你的需求）。确保你的AndroidManifest.xml和Info.plist文件中包含了正确的API密钥配置。

Android配置 (AndroidManifest.xml)

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY_HERE"/>
<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />

iOS配置 (Info.plist)

<key>IOSBundleIdentifiers</key>
<string>YOUR_IOS_BUNDLE_IDENTIFIER</string>
<key>GMSApiKey</key>
<string>YOUR_API_KEY_HERE</string>

Flutter代码示例

创建一个新的Flutter项目或在现有项目中添加以下代码。

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? _controller;
  final LatLng _initialLocation = LatLng(-34.397, 150.644); // 悉尼的坐标
  final CameraPosition _initialCameraPosition = CameraPosition(
    target: _initialLocation,
    zoom: 11.0,
  );

  void _onMapCreated(GoogleMapController controller) {
    _controller = controller;
  }

  void _onMapTap(LatLng point) {
    // 处理地图点击事件
    print("Tapped at: ${point.latitude}, ${point.longitude}");
    if (_controller != null) {
      _controller!.animateCamera(CameraUpdate.newLatLngZoom(point, 14.0));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps Flutter Demo'),
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: _onMapCreated,
        onTap: _onMapTap,
        myLocationEnabled: true,
        markers: Set.from([
          Marker(
            markerId: MarkerId("initial"),
            position: _initialLocation,
            infoWindow: InfoWindow(
              title: 'Sydney',
              snippet: 'Australia',
            ),
          ),
        ]),
      ),
    );
  }
}

说明

  1. 依赖导入：确保导入了google_maps_flutter包。
  2. 地图初始化：在MapScreen中，我们设置了初始的相机位置和标记。
  3. 地图创建回调：onMapCreated回调用于获取GoogleMapController实例，这样你就可以在需要时控制地图（如动画相机移动）。
  4. 地图点击事件：onTap回调用于处理地图上的点击事件，并输出点击的经纬度。
  5. 标记：我们在悉尼的位置添加了一个标记，并为其设置了信息窗口。

这个示例展示了如何在Flutter中使用google_maps_flutter插件来实现基本的地图功能。你可以根据需要进一步扩展，例如添加更多的标记、多边形、圆等。

回到顶部