Flutter地图集成插件casa_google

Flutter地图集成插件casa_google_map的使用

简介

casa_google_map 是一个用于在 Flutter 应用中轻松集成谷歌地图的插件。它可以帮助开发者绘制两点之间的路径（多边线），并支持路径动画。此外，该插件还提供了实时位置跟踪功能，可用于追踪司机位置，并且能够请求设备定位权限。

特性

在两个位置之间绘制多边线（路径）。
支持平滑的路径动画。
可自定义路径的颜色和宽度。
请求设备的定位权限。
实时跟踪司机位置，并在地图上显示更新的标记。
所有标记均可自定义。
几乎所有 google_maps_flutter 定义的参数都可以传递给此插件。

开始使用

获取 API 密钥

首先，你需要从 Google Cloud Platform 获取一个 API 密钥：

访问 Google Cloud Console。
选择你的项目或创建新项目。
启用以下服务：
- Maps SDK for Android
- Maps SDK for iOS
- Directions API

将这些 API 的密钥添加到你的项目中。

Android 配置

在 android/app/src/main/AndroidManifest.xml 文件中添加以下代码：

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

iOS 配置

在 ios/Runner/AppDelegate.m 文件中添加以下代码：

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

@implementation AppDelegate

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

在 Swift 中，修改 ios/Runner/AppDelegate.swift 文件：

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_API_KEY")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Web 配置

在 web/index.html 文件中加载 Google Maps JavaScript API：

<head>
  <!-- 其他内容 -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>

使用示例

首先，在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  casa_google_map:

然后导入插件：

import 'package:casa_google_map/casa_google_map.dart';

接下来，你可以将 CasaGoogleMap 小部件添加到你的应用程序中，并传递所需的参数：

CasaGoogleMap(
  apiKey: "YOUR_API_KEY", // 替换为你的 API 密钥
  sourceLatLng: LatLng(40.484000837597925, -3.369978368282318), // 起点坐标
  destinationLatLng: LatLng(40.48017307700204, -3.3618026599287987), // 终点坐标
),

完整示例代码

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Casa Google Map',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        body: Stack(
          children: [
            CasaGoogleMap(
              apiKey: "YOUR_API_KEY", // 替换为你的 API 密钥
              driverLatLng: myPosition != null
                  ? LatLng(myPosition!.latitude, myPosition!.longitude)
                  : null, // 当前位置
              destinationLatLng: destinationLatLng, // 目标位置
              driverMarkerIcon: const CasaMarkerIcon(
                assetPath: "assets/driver_marker.png", // 自定义司机图标
                assetMarkerSize: Size.square(80.0),
              ),
              routeWidth: 2, // 路径宽度
              driverCoordinatesStream: latlngStreamController.stream, // 司机位置流
              onNewCasaPositionListner: (casaPosition) {
                this.casaPosition = casaPosition; // 更新当前位置
              },
            ),
            Positioned(
              bottom: 20.0,
              left: 24.0,
              right: 24.0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    child: const Text("开始旅程"),
                    onPressed: () {
                      startListeningForDriverLocation(); // 开始监听司机位置
                    },
                  ),
                  ElevatedButton(
                    child: const Text("打开 Google 地图/Apple 地图"),
                    onPressed: () {
                      casaMapService.openMapExternalApp(
                        destinationLatLng: destinationLatLng, // 打开外部地图应用
                      );
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

yibo5220 1楼•5 天前

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

casa_google_map 是一个用于在 Flutter 应用中集成 Google 地图的插件。它基于 Google Maps SDK 提供了一套简单易用的 API，使你能够在应用中显示地图、添加标记、绘制多边形、处理用户交互等。

以下是如何在 Flutter 项目中使用 casa_google_map 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 casa_google_map 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  casa_google_map: ^latest_version

运行 flutter pub get 来安装依赖。

2. 获取 Google Maps API 密钥

要在应用中使用 Google 地图，你需要一个 Google Maps API 密钥。你可以通过以下步骤获取：

访问 Google Cloud Console。
创建一个新项目或选择现有项目。
启用 Maps SDK for Android 和 Maps SDK for iOS。
在 API 和服务 -> 凭据 中创建一个 API 密钥。

3. 配置 Android 和 iOS 项目

Android

在 android/app/src/main/AndroidManifest.xml 文件中添加以下代码：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

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

iOS

在 ios/Runner/AppDelegate.swift 文件中添加以下代码：

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_IOS_API_KEY")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

4. 使用 `casa_google_map` 插件

在你的 Flutter 代码中，你可以使用 CasaGoogleMap 组件来显示地图。

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

class MapScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Map Example'),
      ),
      body: CasaGoogleMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(37.42796133580664, -122.085749655962),
          zoom: 14.0,
        ),
        markers: {
          Marker(
            markerId: MarkerId('marker_1'),
            position: LatLng(37.42796133580664, -122.085749655962),
            infoWindow: InfoWindow(title: 'Marker 1'),
          ),
        },
        onMapCreated: (GoogleMapController controller) {
          // 地图创建完成后的回调
        },
      ),
    );
  }
}

Flutter地图集成插件casa_google_map的使用