Flutter 的 GoogleMapsWidget

一个 Flutter 包，可用于从源到目的地制作折线（路线），还可以处理地图上（如果有）的司机的实时位置。

一个供 Flutter 开发者使用的 Widget，可以轻松地在他们的应用程序中集成 Google 地图。它可以用于绘制从源到目的地的折线，并处理地图上司机的实时位置（如果有）。

功能

  • 通过提供两个位置的纬度和经度，在两个位置之间绘制折线（路线）。
  • 路线可以自定义颜色和宽度。
  • 该插件还为司机（如果有）提供实时位置跟踪，并在地图上显示一个标记，该标记会随着司机位置的变化而更新。
  • 所有标记均可自定义。
  • 为所有标记及其信息窗口实现了 onTap 回调，以便轻松处理用户交互。
  • 几乎所有在 google_maps_flutter 中为 GoogleMap Widget 定义的参数都可以作为参数传递给该 Widget。

屏幕截图

      

入门

  • 在 https://cloud.google.com/maps-platform/ 获取 API 密钥。

  • 为每个平台启用 Google Map SDK。

    • 转到 Google Developers Console。
    • 选择您要为其启用 Google Maps 的项目。
    • 选择导航菜单，然后选择“Google Maps”。
    • 在 Google Maps 菜单下选择“API”。
    • 要启用 Android 版 Google Maps，请在“其他 API”部分选择“Maps SDK for Android”，然后选择“ENABLE”。
    • 要启用 iOS 版 Google Maps，请在“其他 API”部分选择“Maps SDK for iOS”，然后选择“ENABLE”。
    • 要启用 Directions API，请在“其他 API”部分选择“Directions API”，然后选择“ENABLE”。
    • 确保您启用的 API 位于“已启用 API”部分。

有关更多详细信息，请参阅 Google Maps Platform 入门指南。

Android

在应用程序清单 android/app/src/main/AndroidManifest.xml 中指定您的 API 密钥

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

iOS

在应用程序代理 ios/Runner/AppDelegate.m 中指定您的 API 密钥

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

或者在您的 Swift 代码中，在应用程序代理 ios/Runner/AppDelegate.swift 中指定您的 API 密钥

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Web

修改 web/index.html

获取 Google Maps JavaScript API 的 API 密钥。在此处 开始。
修改 web/index.html 的 <head> 标签以加载 Google Maps JavaScript API，如下所示

<head>

  <!-- // Other stuff -->

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
</head>

用法

要使用此插件，请将 google_maps_widget 添加到您的 pubspec.yaml 文件中作为依赖项。

  dependencies:
    flutter:
      sdk: flutter
    google_maps_widget:

首先，导入 Widget。

import 'package:google_maps_widget/google_maps_widget.dart';

您现在可以将 GoogleMapsWidget Widget 添加到您的 Widget 树中，并传递所有必需的参数即可开始。
此 Widget 将在提供的源和目的地的 LatLng 之间创建一条路线。

GoogleMapsWidget(
    apiKey: "YOUR KEY HERE",
    sourceLatLng: LatLng(40.484000837597925, -3.369978368282318),
    destinationLatLng: LatLng(40.48017307700204, -3.3618026599287987),
),

示例用法

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: GoogleMapsWidget(
            apiKey: "YOUR KEY HERE",
            sourceLatLng: LatLng(40.484000837597925, -3.369978368282318),
            destinationLatLng: LatLng(40.48017307700204, -3.3618026599287987),

            ///////////////////////////////////////////////////////
            //////////////    OPTIONAL PARAMETERS    //////////////
            ///////////////////////////////////////////////////////

            routeWidth: 2,
            sourceMarkerIconInfo: MarkerIconInfo(
              assetPath: "assets/images/house-marker-icon.png",
            ),
            destinationMarkerIconInfo: MarkerIconInfo(
              assetPath: "assets/images/restaurant-marker-icon.png",
            ),
            driverMarkerIconInfo: MarkerIconInfo(
              assetPath: "assets/images/driver-marker-icon.png",
              assetMarkerSize: Size.square(125),
            ),
            // mock stream
            driverCoordinatesStream: Stream.periodic(
              Duration(milliseconds: 500),
              (i) => LatLng(
                40.47747872288886 + i / 10000,
                -3.368043154478073 - i / 10000,
              ),
            ),
            sourceName: "This is source name",
            driverName: "Alex",
            onTapDriverMarker: (currentLocation) {
              print("Driver is currently at $currentLocation");
            },
            totalTimeCallback: (time) => print(time),
            totalDistanceCallback: (distance) => print(distance),

            /// and a lot more...
          ),
        ),
      ),
    );
  }
}

有关完整的示例应用程序，请参阅 example 目录。

GitHub

https://github.com/rithik-dev/google_maps_widget