Flutter地图展示插件platform_maps_flutter的使用

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

Flutter地图展示插件platform_maps_flutter的使用

简介

platform_maps_flutter 是一个Flutter插件,它为Android和iOS设备提供了原生的地图支持。该插件依赖于Flutter嵌入Android和iOS视图的机制,因此目前仍处于开发者预览阶段。

这个包结合了 google_maps_flutterapple_maps_flutter 插件,为Android和iOS创建了一个跨平台的原生地图实现。

功能截图

Android iOS
Example 1 Example 2
Example 1 Example 2

当前功能

  • 相机移动,包括方向、航向、倾斜(也支持动画)
  • 标记,包括自定义标记图像和信息窗口
  • 不同的地图类型
  • 地图操作,启用/禁用手势,显示当前位置,显示指南针等

iOS配置

要在iOS上使用此插件,需要在app的Info.plist文件中添加一个布尔属性,键为 io.flutter.embedded_views_preview,值为 YES。还需要添加 Privacy - Location When In Use Usage Description 键,并提供您的使用描述。

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Your usage description here</string>

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"/>

示例用法

以下是一个完整的示例代码,展示了如何使用 platform_maps_flutter 插件:

示例代码

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

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PlatformMap(
        initialCameraPosition: CameraPosition(
          target: const LatLng(47.6, 8.8796),
          zoom: 16.0,
        ),
        markers: Set<Marker>.of(
          [
            Marker(
              markerId: MarkerId('marker_1'),
              position: LatLng(47.6, 8.8796),
              consumeTapEvents: true,
              infoWindow: InfoWindow(
                title: 'PlatformMarker',
                snippet: "Hi I'm a Platform Marker",
              ),
              onTap: () {
                print("Marker tapped");
              },
            ),
          ],
        ),
        mapType: MapType.satellite,
        onTap: (location) => print('onTap: $location'),
        onCameraMove: (cameraUpdate) => print('onCameraMove: $cameraUpdate'),
        compassEnabled: true,
        onMapCreated: (controller) {
          Future.delayed(Duration(seconds: 2)).then(
            (_) {
              controller.animateCamera(
                CameraUpdate.newCameraPosition(
                  const CameraPosition(
                    bearing: 270.0,
                    target: LatLng(51.5160895, -0.1294527),
                    tilt: 30.0,
                    zoom: 18,
                  ),
                ),
              );
              controller
                  .getVisibleRegion()
                  .then((bounds) => print("bounds: ${bounds.toString()}"));
            },
          );
        },
      ),
    );
  }
}

说明

  • initialCameraPosition: 设置初始相机位置,包括目标经纬度和缩放级别。
  • markers: 添加标记,可以设置自定义图标和信息窗口。
  • mapType: 设置地图类型,例如卫星图或普通地图。
  • onTap: 处理地图点击事件。
  • onCameraMove: 处理相机移动事件。
  • compassEnabled: 启用指南针。
  • onMapCreated: 地图创建完成后执行的操作,例如动画移动相机位置。

希望这个示例能帮助你更好地理解和使用 platform_maps_flutter 插件。如果有任何建议或改进意见,欢迎提交PR。


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

1 回复

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


当然,以下是一个使用 platform_maps_flutter 插件在 Flutter 应用中展示地图的示例代码。这个插件允许你使用 Google Maps(在 Android 和 iOS 上)和 Apple Maps(仅在 iOS 上)来显示地图。

首先,你需要在你的 pubspec.yaml 文件中添加 platform_maps_flutter 依赖:

dependencies:
  flutter:
    sdk: flutter
  platform_maps_flutter: ^2.0.0  # 请检查最新版本号

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

接下来,你需要设置 Android 和 iOS 的 API 密钥。对于 Google Maps,你需要在 Google Cloud Console 上创建一个项目并启用 Maps SDK for Android 和 iOS,然后分别获取 API 密钥。

Android 设置

android/app/src/main/AndroidManifest.xml 中添加 API 密钥:

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

iOS 设置

ios/Runner/Info.plist 中添加 API 密钥:

<key>GOOGLE_MAPS_API_KEY</key>
<string>YOUR_IOS_API_KEY</string>

并且,确保在 ios/Podfile 中添加以下配置以使用 Google Maps SDK:

platform :ios, '11.0'

target 'Runner' do
  use_frameworks!
  config = use_native_modules!

  # Flutter Pod
  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))

  # Add this line to use Google Maps SDK
  pod 'GoogleMaps'

  # Add any additional pods you require
  # ...

  target 'RunnerTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'RunnerUITests' do
    # Pods for testing
  end
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',
        ## Add these lines to use Google Maps SDK
        'GMS_CORE=1',
        'GOOGLE_MAPS_IOS_VERSION=8.0.0'  # Update to the latest version
      ]
    end
  end
end

Flutter 代码示例

接下来,在你的 Dart 文件中使用 platform_maps_flutter 来显示地图。以下是一个简单的示例:

import 'package:flutter/material.dart';
import 'package:platform_maps_flutter/platform_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> {
  late PlatformMapController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Platform Maps Flutter Example'),
      ),
      body: PlatformMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(37.7749, -122.4194), // San Francisco
          zoom: 12.0,
        ),
        onMapCreated: (PlatformMapController controller) {
          _controller = controller;
        },
        options: MapOptions(
          mapType: MapType.normal,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Example: Move camera to a new location
          _controller.animateCamera(
            CameraUpdate.newLatLngZoom(
              LatLng(40.7128, -74.0060), // New York
              12.0,
            ),
          );
        },
        tooltip: 'Move to New York',
        child: Icon(Icons.location_on),
      ),
    );
  }
}

这个示例展示了如何创建一个简单的 Flutter 应用,其中包含一个地图视图,并允许用户通过点击浮动操作按钮将地图中心移动到纽约市。

请注意,根据你的项目设置和平台的不同,你可能需要调整一些配置步骤。确保你遵循了 platform_maps_flutter 插件的官方文档中的最新指南。

回到顶部