Flutter地图服务插件vietmap_flutter_plugin的使用

Flutter地图服务插件vietmap_flutter_plugin的使用

Vietmap API Flutter插件

Vietmap Logo

联系vietmap.vn注册有效的密钥。

开始使用

在pubspec.yaml文件中添加库：

vietmap_flutter_plugin: latest_version

检查最新版本，请访问https://pub.dev/packages/vietmap_flutter_plugin，或在终端运行以下命令以将库添加到项目：

flutter pub add vietmap_flutter_plugin

使用方法

初始化插件

必须调用Vietmap.getInstance(apiKey)方法才能使用其他方法。

Vietmap.getInstance('YOUR_API_KEY_HERE');

我们提供了以下方法来使用Vietmap API：

// 自动完成搜索
Vietmap.autocomplete(VietMapAutoCompleteParams(textSearch: 'Hà Nội'));

// 地理编码
Vietmap.geoCode(VietMapAutoCompleteParams(textSearch: 'Hà Nội'));

// 反向地理编码
Vietmap.reverse(LatLng(21.027763, 105.834160));

// 获取地点信息
Vietmap.place('Place ID');

// 路径规划
Vietmap.routing(VietMapRoutingParams(points: [
  LatLng(21.027763, 105.834160),
  LatLng(21.027763, 105.834160)
]));

// 获取Vietmap样式URL
Vietmap.getVietmapStyleUrl();

// 矩阵计算
Vietmap.matrix(VietmapMatrixParams(
  points: [
    const LatLng(10.768897, 106.678505),
    const LatLng(10.765496, 106.67626),
    const LatLng(10.7627936, 106.6750729),
    const LatLng(10.7616745, 106.6792425),
    const LatLng(10.765605, 106.685383),
  ],
  sourcePoints: [0, 1],
  isShowTablePreview: true,
  destinationPoints: [2, 3, 4],
));

额外信息

此包是Vietmap API项目的组成部分。

故障排除

我们的插件依赖于dio和dartz包的最新版本。如果我们的插件与您的当前项目有冲突，请尝试使用这些包的最新版本，或者遵循以下说明：

dependencies:
    dio: your_project_version
    dartz: your_project_version

dependencies_override:
    dio: our_plugin_version
    dartz: our_plugin_version

我们使用dartz包来响应API结果。请查看dartz包以了解如何处理结果。

var autocompleteData = await Vietmap.autocomplete(VietMapAutoCompleteParams(textSearch: 'Hà Nội'));
autocompleteData.fold(
      (Failure left) {
        // 处理错误
      },
      (List<VietmapAutocompleteModel> right) {
        // 处理成功
      },
    );

注意事项

请将由VietMap提供的apikey替换为所有YOUR_API_KEY_HERE标签，以使应用程序正常工作。

完整示例代码

// ignore_for_file: unused_local_variable

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:vietmap_flutter_gl/vietmap_flutter_gl.dart';
import 'package:vietmap_flutter_plugin/vietmap_flutter_plugin.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Vietmap flutter plugin demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  VietmapController? _mapController;
  final List<Marker> _nearbyMarker = [];

  Future<void> _incrementCounter() async {
    var res = await Vietmap.reverse(const LatLng(21.027763, 105.834160));

    Vietmap.autocomplete(VietMapAutoCompleteParams(textSearch: 'Hà Nội'));
    Vietmap.geoCode(VietMapAutoCompleteParams(textSearch: 'Hà Nội'));
    Vietmap.reverse(const LatLng(21.027763, 105.834160));
    Vietmap.place('Place ID');
    var routingResponse = await Vietmap.routing(VietMapRoutingParams(points: [
      const LatLng(10.779391, 106.624833),
      const LatLng(10.741039, 106.672116)
    ]));
    routingResponse.fold((Failure failure) {
      // 处理失败
    }, (VietMapRoutingModel success) {
      if (success.paths?.isNotEmpty == true && success.paths![0].points?.isNotEmpty == true) {}
    });
    Vietmap.getVietmapStyleUrl();
  }

  [@override](/user/override)
  void initState() {
    // 在使用Vietmap API之前必须调用此方法。
    Vietmap.getInstance("YOUR_API_KEY_HERE");
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                height: 300,
                child: Stack(
                  children: [
                    VietmapGL(
                        onMapCreated: (controller) {
                          setState(() {
                            _mapController = controller;
                          });
                        },
                        trackCameraPosition: true,
                        myLocationEnabled: true,
                        myLocationRenderMode: MyLocationRenderMode.COMPASS,
                        myLocationTrackingMode: MyLocationTrackingMode.TrackingCompass,
                        initialCameraPosition: const CameraPosition(
                            target: LatLng(21.027763, 105.834160), zoom: 7),
                        styleString: Vietmap.getVietmapStyleUrl()),
                    _mapController == null
                        ? const SizedBox.shrink()
                        : MarkerLayer(
                            markers: _nearbyMarker,
                            mapController: _mapController!),
                  ],
                ),
              ),
              Expanded(
                child: SingleChildScrollView(
                    child: Column(
                  children: [
                    TextField(
                      decoration: InputDecoration(
                        hintText: 'Enter a search term',
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                        suffixIcon: const Icon(Icons.search),
                      ),
                      onChanged: (value) {},
                    ),
                  ],
                )),
              ),
            ],
          ),
        ),
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton(
              onPressed: () async {
                var res = await Vietmap.autocomplete(
                    VietMapAutoCompleteParams(textSearch: 'Hue'));
                res.fold((l) {}, (r) {
                  log(r.first.toJson().toString());
                });
              },
              child: const Icon(Icons.list),
            ),
            const SizedBox(height: 10),
            FloatingActionButton(
                onPressed: () async {
                  var res = await Vietmap.reverse(
                      const LatLng(11.94512696144, 106.816722168));
                  res.fold((l) {}, (r) {
                    log(r.toJson().toString());
                  });
                },
                child: const Icon(Icons.location_on)),
            const SizedBox(height: 10),
            FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: const Icon(Icons.add),
            ),
            FloatingActionButton(
                onPressed: () async {
                  var res = await Vietmap.matrix(VietmapMatrixParams(
                      points: [
                        const LatLng(10.768897, 106.678505),
                        const LatLng(10.765496, 106.67626),
                        const LatLng(10.7627936, 106.6750729),
                        const LatLng(10.7616745, 106.6792425),
                        const LatLng(10.765605, 106.685383),
                      ],
                      sourcePoints: [0, 1],
                      isShowTablePreview: true,
                      destinationPoints: [2, 3, 4]));
                  res.fold((l) => null, (r) => null);
                },
                child: const Icon(Icons.location_on)),
            const SizedBox(height: 10),
            FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: const Icon(Icons.add),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


关于Flutter地图服务插件vietmap_flutter_plugin的使用，以下是一个简单的代码示例，展示了如何在Flutter项目中集成并使用该插件来显示地图。请注意，vietmap_flutter_plugin是一个假设的插件名称，实际使用时请确保插件名称正确，并查阅其官方文档以获取最新的安装和使用指南。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加vietmap_flutter_plugin依赖：

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

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入插件：

import 'package:vietmap_flutter_plugin/vietmap_flutter_plugin.dart';

3. 使用插件显示地图

下面是一个简单的示例，展示了如何在Flutter应用中显示一个地图：

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

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

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

class VietMapScreen extends StatefulWidget {
  @override
  _VietMapScreenState createState() => _VietMapScreenState();
}

class _VietMapScreenState extends State<VietMapScreen> {
  late VietMapController _vietMapController;

  @override
  void initState() {
    super.initState();
    // 初始化地图控制器
    _vietMapController = VietMapController(
      apiKey: 'YOUR_API_KEY', // 替换为你的API密钥
      onMapCreated: (VietMapController controller) {
        // 地图创建完成后回调
        controller.moveCamera(CameraUpdate.newLatLngZoom(
          LatLng(21.033333, 105.850000), // 替换为你想显示的位置
          15.0,
        ));
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return VietMapView(
      controller: _vietMapController,
      options: VietMapOptions(
        // 你可以在这里配置地图的选项，如样式等
      ),
    );
  }

  @override
  void dispose() {
    _vietMapController.dispose();
    super.dispose();
  }
}

注意事项

  1. API密钥：确保你已经获得了相应的地图服务API密钥，并在代码中正确配置。
  2. 权限：在Android和iOS项目中，确保已经配置了必要的权限，以便应用可以访问网络和使用定位服务。
  3. 插件版本：上述代码示例是基于假设的插件版本和API。实际使用时，请查阅插件的官方文档，了解如何正确配置和使用。

由于vietmap_flutter_plugin是一个假设的插件名称，如果它实际上不存在或名称有误，请替换为实际的地图服务插件，如flutter_map、google_maps_flutter等，并参考其官方文档进行集成和使用。

回到顶部