Flutter地图展示插件map4d_map的使用

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

Flutter地图展示插件map4d_map的使用

Map4dMap for Flutter

map4d platform pub package github issues

这是一个为Flutter提供的Map4dMap小部件插件。

使用方法

要在项目中使用此插件，需要在pubspec.yaml文件中添加map4d_map作为依赖项。

dependencies:
  map4d_map: ^2.5.3

最低Android/iOS SDK版本支持

Android

要求Android SDK 21或更高版本。请在android/app/build.gradle设置minSdkVersion：

android {
    defaultConfig {
        minSdkVersion 21
    }
}

iOS

要求iOS 9.3或更高版本。

设置API Key

API key是与您的项目关联请求的身份验证唯一标识符，用于用量统计和计费目的。您必须为您的项目至少关联一个API key。

获取API key：https://map.map4d.vn/user/access-key/

Android

在android/app/src/main/AndroidManifest.xml提供访问密钥：

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application>
        <meta-data
            android:name="vn.map4d.map.ACCESS_KEY"
            android:value="YOUR_KEY_HERE"/>
    </application>
</manifest>

iOS

在ios/Runner/Info.plist提供访问密钥：

<key>Map4dMapAccessKey</key>
<string>YOUR_KEY_HERE</string>

简单使用示例

以下是一个简单的使用示例，展示了如何在Flutter应用中集成Map4D地图：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Map4D Map',
      home: MFMapView(),
    );
  }
}

更多功能示例

对于更复杂的用法，可以参考官方示例代码库，这里提供了更多关于如何使用该插件的功能演示，包括但不限于：

  • 地图点击事件处理
  • 坐标操作
  • 相机动画
  • 添加标记、多边形、圆等图形元素
  • 图层叠加
  • 方向渲染

文档

通过以上步骤，您可以快速开始在Flutter应用程序中集成并使用Map4D地图服务。如果您有任何问题或者需要进一步的帮助，请查阅官方文档或访问GitHub仓库以获取更多信息和支持。


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用map4d_map插件来展示地图的示例代码。这个插件是用于集成4D Maps（由越南的一家公司开发）到Flutter应用中的。首先，你需要确保已经在你的pubspec.yaml文件中添加了map4d_map依赖项：

dependencies:
  flutter:
    sdk: flutter
  map4d_map: ^最新版本号  # 请替换为当前最新版本号

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

接下来是一个简单的示例，展示如何在Flutter应用中使用map4d_map插件来展示地图：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map4D Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

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

class _MapScreenState extends State<MapScreen> {
  final Map4DController _controller = Map4DController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map4D Demo'),
      ),
      body: Map4DWidget(
        apiKey: '你的Map4D API密钥', // 请替换为你的Map4D API密钥
        initialCameraPosition: CameraPosition(
          target: LatLng(10.761680, 106.696743), // 默认展示的经纬度，例如越南河内
          zoom: 14.0,
        ),
        onMapCreated: (Map4DController controller) {
          _controller.complete(controller);
        },
        options: Map4DOptions(
          myLocationEnabled: true,
          compassEnabled: true,
          scrollGesturesEnabled: true,
          tiltGesturesEnabled: true,
          rotateGesturesEnabled: true,
          zoomGesturesEnabled: true,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final Map4DController controller = await _controller.future;
          final LatLng currentLocation = await controller.getCurrentLocation();
          print('当前位置: $currentLocation');
        },
        tooltip: '获取当前位置',
        child: Icon(Icons.location_on),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，其中包含一个Map4DWidget用于显示地图。
  2. apiKey需要替换为你从Map4D平台获取的API密钥。
  3. initialCameraPosition定义了地图初始的中心点和缩放级别。
  4. onMapCreated回调允许我们获取Map4DController实例，以便后续操作，比如获取当前位置。
  5. options参数允许我们配置地图的各种选项，如是否启用我的位置、指南针等。
  6. 一个浮动操作按钮（FAB）被添加到界面上，用于获取并打印当前设备的位置。

请确保你已经正确设置了Map4D的API密钥，并且你的应用有相应的权限（如访问位置信息）来获取当前位置。如果需要在真实设备上测试位置功能，请确保设备的位置服务已开启。

回到顶部