Flutter地图展示插件google_maps_widget的使用

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

Flutter 地图展示插件 google_maps_widget 的使用

概述

GoogleMapsWidget 是一个用于 Flutter 开发者的插件，旨在帮助开发者轻松地在他们的应用中集成谷歌地图。它可以用于绘制从起点到终点的多段线（路线），并且可以处理司机的实时位置（如果有）。

功能

  • 路线创建：通过提供纬度和经度来绘制起点和终点之间的多段线（路线）。
  • 自定义路线外观：自定义路线的颜色和宽度。
  • 实时位置跟踪：为司机提供实时位置跟踪功能，并自动更新地图上的标记。
  • 标记自定义：完全可定制的标记。
  • 用户交互处理：处理所有标记和信息窗口的 onTap 回调，以方便用户交互。
  • 支持完整的谷歌地图参数：支持传递几乎所有的谷歌地图参数给 GoogleMap 小部件作为插件的参数。

开始使用

步骤 1：获取 API 密钥

访问 Google Cloud Maps Platform 并获取 API 密钥。

步骤 2：启用谷歌地图 SDK 和方向 API

  • 转到 Google 开发者控制台，选择你的项目，并从导航菜单中打开谷歌地图部分。在 API 下，启用 Android 地图 SDK、iOS 地图 SDK 和 Web 地图 JavaScript API（在“附加 API”部分）。
  • 为了启用方向 API，在“附加 API”部分选择“方向 API”，然后选择“启用”。

确保你启用的 API 在“已启用的 API”部分中。

步骤 3：参考文档

有关详细信息，请参阅 Google 地图平台入门指南。

平台特定设置

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 密钥：

#import "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 代码中，指定你的 API 密钥在应用委托文件 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 KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Web

注意：请参考谷歌地图的平台特定设置 此处。

修改 web/index.html 文件

获取 Google 地图 JavaScript API 的 API 密钥。开始 这里。

修改 web/index.html 文件的 <head> 部分以加载 Google 地图 JavaScript API，如下所示：

<head>

  <!-- 其他内容 -->

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

使用

  1. 在 pubspec.yaml 文件中添加 google_maps_widget 依赖。
dependencies:
  flutter:
    sdk: flutter
    
  google_maps_widget:
  1. 现在可以在你的小部件树中添加 GoogleMapsWidget 小部件，并传递所有必需的参数以开始使用。此小部件将在提供的源和目的地经纬度之间创建一条路径。
import 'package:google_maps_widget/google_maps_widget.dart';

GoogleMapsWidget(
  apiKey: "YOUR KEY HERE",
  sourceLatLng: LatLng(40.484000837597925, -3.369978368282318),
  destinationLatLng: LatLng(40.48017307700204, -3.3618026599287987),
),
  1. 可以创建一个控制器并与谷歌地图控制器进行交互，或更新源和目的地的经纬度。
// 可以创建一个控制器，并调用方法来更新源位置、
// 目的地位置，与谷歌地图控制器进行交互以程序化地显示/隐藏标记等。
final mapsWidgetController = GlobalKey<GoogleMapsWidgetState>();

// 将此控制器传递给 "key" 参数，然后可以像这样更新源或目的地，这也将重建路径。
mapsWidgetController.currentState!.setSourceLatLng(
  LatLng(
    40.484000837597925 * (Random().nextDouble()),
    -3.369978368282318,
  ),
);

// 或者，可以直接与谷歌地图控制器进行交互以专注于标记等...

final googleMapsCon = await mapsWidgetController.currentState!.getGoogleMapsController();
googleMapsCon.showMarkerInfoWindow(MarkerIconInfo.sourceMarkerId);

示例代码

import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  // 可以创建一个控制器，并调用方法来更新源位置、
  // 目的地位置，与谷歌地图控制器进行交互以程序化地显示/隐藏标记等。
  final mapsWidgetController = GlobalKey<GoogleMapsWidgetState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              Expanded(
                child: GoogleMapsWidget(
                  apiKey: "YOUR GOOGLE MAPS API KEY HERE",
                  key: mapsWidgetController,
                  sourceLatLng: LatLng(
                    40.484000837597925,
                    -3.369978368282318,
                  ),
                  destinationLatLng: LatLng(
                    40.48017307700204,
                    -3.3618026599287987,
                  ),

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

                  routeWidth: 2,
                  sourceMarkerIconInfo: MarkerIconInfo(
                    infoWindowTitle: "This is source name",
                    onTapInfoWindow: (_) {
                      debugPrint("Tapped on source info window");
                    },
                    assetPath: "assets/images/house-marker-icon.png",
                    assetMarkerSize: Size.square(50),
                  ),
                  destinationMarkerIconInfo: MarkerIconInfo(
                    assetPath: "assets/images/restaurant-marker-icon.png",
                    assetMarkerSize: Size.square(50),
                  ),
                  driverMarkerIconInfo: MarkerIconInfo(
                    infoWindowTitle: "Alex",
                    assetPath: "assets/images/driver-marker-icon.png",
                    onTapMarker: (currentLocation) {
                      debugPrint("Driver is currently at $currentLocation");
                    },
                    assetMarkerSize: Size.square(50),
                    rotation: 90,
                  ),
                  onPolylineUpdate: (p) {
                    debugPrint("Polyline updated: ${p.points}");
                  },
                  updatePolylinesOnDriverLocUpdate: true,
                  // 模拟流
                  driverCoordinatesStream: Stream.periodic(
                    Duration(milliseconds: 500),
                    (i) => LatLng(
                      40.47747872288886 + i / 10000,
                      -3.368043154478073 - i / 10000,
                    ),
                  ),
                  totalTimeCallback: (time) => debugPrint(time),
                  totalDistanceCallback: (distance) => debugPrint(distance),
                ),
              ),
              // 展示如何与控制器进行交互
              Padding(
                padding: const EdgeInsets.all(10),
                child: Row(
                  children: [
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () {
                          mapsWidgetController.currentState!.setSourceLatLng(
                            LatLng(
                              40.484000837597925 * (Random().nextDouble()),
                              -3.369978368282318,
                            ),
                          );
                        },
                        child: Text('Update source'),
                      ),
                    ),
                    const SizedBox(width: 10),
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () async {
                          final googleMapsCon = await mapsWidgetController
                              .currentState!
                              .getGoogleMapsController();
                          googleMapsCon.showMarkerInfoWindow(
                            MarkerIconInfo.sourceMarkerId,
                          );
                        },
                        child: Text('Show source info'),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个使用 google_maps_widget（请注意，这个库可能不是官方的 Flutter Google Maps 插件，通常官方插件是 google_maps_flutter。但为了符合你的要求，我将基于假设这个库具有类似的功能）来展示地图的简单示例代码。如果实际使用的库有所不同，请参考其官方文档进行调整。

首先，确保你的 Flutter 项目已经配置好 Google Maps API 密钥。这通常涉及以下几个步骤：

  1. 在 Google Cloud Platform 上创建一个项目。
  2. 启用 Google Maps JavaScript API 和 Google Maps Places API（对于需要地点搜索等功能的情况）。
  3. 创建一个 API 密钥，并将其限制到特定的 IP 地址或应用。
  4. 在 AndroidManifest.xml 和 Info.plist 文件中添加必要的权限和 API 密钥配置。

假设 google_maps_widget 的使用方式与 google_maps_flutter 类似，下面是一个基本的 Flutter 应用代码示例，展示如何在应用中集成地图：

1. 添加依赖

在你的 pubspec.yaml 文件中添加 google_maps_widget（或实际使用的插件）依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_widget: ^x.y.z  # 替换为实际版本号

2. 导入插件并配置地图

在你的 Dart 文件中（例如 main.dart），导入插件并配置地图：

import 'package:flutter/material.dart';
import 'package:google_maps_widget/google_maps_widget.dart'; // 假设库名为 google_maps_widget

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Maps Demo'),
        ),
        body: GoogleMapScreen(),
      ),
    );
  }
}

class GoogleMapScreen extends StatefulWidget {
  @override
  _GoogleMapScreenState createState() => _GoogleMapScreenState();
}

class _GoogleMapScreenState extends State<GoogleMapScreen> {
  GoogleMapController? _controller;

  static final LatLng _center = LatLng(37.7749, -122.4194); // 旧金山的坐标

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      mapType: MapType.normal,
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 14.0,
      ),
      onMapCreated: (GoogleMapController controller) {
        _controller = controller;
      },
      markers: Set.from([
        Marker(
          markerId: MarkerId("center"),
          position: _center,
          infoWindow: InfoWindow(
            title: 'San Francisco',
            snippet: 'Population: 800,000+',
          ),
        ),
      ]),
    );
  }
}

3. 配置 Android 和 iOS

确保你的 AndroidManifest.xml 和 Info.plist 文件中配置了必要的权限和 API 密钥。

对于 Android：

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

    <!-- 添加必要的权限 -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        ... >
        <!-- 添加 API 密钥 -->
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_API_KEY_HERE" />
        ...
    </application>
</manifest>

对于 iOS：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>GOOGLE_API_KEY</key>
<string>YOUR_API_KEY_HERE</string>

请注意，上述代码和配置是基于假设的 google_maps_widget 库。如果你实际使用的是 google_maps_flutter 或其他类似的库，请参考其官方文档进行适当的调整。此外，确保你的 API 密钥已经正确配置，并且你的应用已经获得了必要的权限。

回到顶部