Flutter地图服务插件flutter_dhl_amap的使用

开始使用

flutter_dhl_amap 是一个用于在 Flutter 应用中集成高德地图服务的插件。通过该插件，开发者可以轻松实现地图显示、定位、标注等功能。

初始化插件

首先，确保在 main() 函数中正确初始化插件并设置高德地图的 API Key。API Key 是调用高德地图服务的必要凭证。

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  var _result = "";
  var m_key = 0;
  late DHL_aMapView dhl_aMapView;

  [@override](/user/override)
  void initState() {
    super.initState();

    initPlatformState();
    new FlutterDhlAmap();
    FlutterDhlAmap.setInit("5a7ad9d014cfe8083741e895cfc15ee2"); // 初始化插件并设置高德地图 API Key

    FlutterDhlAmap.startLocation(DHL_AMapLocationOption( // 设置定位参数
      interval: 10000,
      onceLocationLatest: true,
      locationCacheEnable: false,
      allowsBackgroundLocationUpdates: true,
      locationTimeout: 2,
      reGeocodeTimeout: 2,
    )); // 开始定位

    FlutterDhlAmap.onLocationUpate.listen((DHL_Location_Model data) {
      if (!mounted) return;
      print(data.formattedAddress);
      dhl_aMapView.SetCoordinate(data.lat, data.lon); // 定位成功后设置地图中心
      dhl_aMapView.SetMymarkerContent(data.lat.toString(), data.lon.toString());

      setState(() {
        m_key++;
        _result = data.formattedAddress;
      });
    });

    FlutterDhlAmap.onLocationUpate_Measure.listen((List<DHL_Measure_Model> data) { // 计算两个坐标的回调
      List<DHL_Measure_Model> dat = data;
    });

    initPlatformState();
  }

  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await FlutterDhlAmap.platformVersion;
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }
}

配置地图视图

在 build() 方法中配置地图视图，并添加必要的功能按钮。

[@override](/user/override)
Widget build(BuildContext context) {
  dhl_aMapView = DHL_aMapView(dhlAMapViewModel: DHL_aMapView_Model(
    setZoomControlsEnabled: true,
    setCompassEnabled: true,
    setMyLocationButtonEnabled: true,
    setScaleControlsEnabled: true,
    setZoomGesturesEnabled: true,
  ));

  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Row(
          children: <Widget>[
            RaisedButton(
              onPressed: () async {
                dhl_aMapView.AddMarker(22.160258, 113.347154, "标题", "内容", "0", true); // 添加标注
                dhl_aMapView.UpdateMarker(22.160257, 113.347154, "更新到了", "更新到了", "0"); // 更新标注
                FlutterDhlAmap.Calculation_location(22.160258, 113.347154, 23.697839, 113.0441, 1); // 计算两点距离

                // Map<dynamic, dynamic> dmap = await FlutterDhlAmap.changeLocation(22.160258, 113.347154, "baidu"); // 转换坐标
              },
              child: Text('Plugin example app:'),
            ),

            RaisedButton(
              onPressed: () {
                dhl_aMapView.DelMarkerShow("0"); // 删除所有标注
              },
              child: Text('22222'),
            ),
          ],
        ),
      ),
      body: Center(
        child: dhl_aMapView,
      ),
    ),
  );
}

功能说明

• 定位功能：通过 startLocation 方法启动定位，并监听定位更新事件。
• 添加标注：使用 AddMarker 方法在地图上添加标注。
• 更新标注：使用 UpdateMarker 方法更新已有的标注。
• 删除标注：使用 DelMarkerShow 方法删除所有标注。
• 计算距离：使用 Calculation_location 方法计算两个坐标之间的距离。

完整示例代码

以下是完整的示例代码：

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

import 'package:flutter/services.dart';
import 'package:flutter_dhl_amap/DHL_Location.dart';
import 'package:flutter_dhl_amap/DHL_Location_Model.dart';
import 'package:flutter_dhl_amap/Search/DHL_Measure_Model.dart';
import 'package:flutter_dhl_amap/aMap/DHL_aMapView.dart';
import 'package:flutter_dhl_amap/aMap/DHL_aMapView_Model.dart';
import 'package:flutter_dhl_amap/flutter_dhl_amap.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  var _result = "";
  var m_key = 0;
  late DHL_aMapView dhl_aMapView;

  [@override](/user/override)
  void initState() {
    super.initState();

    initPlatformState();
    new FlutterDhlAmap();
    FlutterDhlAmap.setInit("5a7ad9d014cfe8083741e895cfc15ee2"); // 初始化插件并设置高德地图 API Key

    FlutterDhlAmap.startLocation(DHL_AMapLocationOption( // 设置定位参数
      interval: 10000,
      onceLocationLatest: true,
      locationCacheEnable: false,
      allowsBackgroundLocationUpdates: true,
      locationTimeout: 2,
      reGeocodeTimeout: 2,
    )); // 开始定位

    FlutterDhlAmap.onLocationUpate.listen((DHL_Location_Model data) {
      if (!mounted) return;
      print(data.formattedAddress);
      dhl_aMapView.SetCoordinate(data.lat, data.lon); // 定位成功后设置地图中心
      dhl_aMapView.SetMymarkerContent(data.lat.toString(), data.lon.toString());

      setState(() {
        m_key++;
        _result = data.formattedAddress;
      });
    });

    FlutterDhlAmap.onLocationUpate_Measure.listen((List<DHL_Measure_Model> data) { // 计算两个坐标的回调
      List<DHL_Measure_Model> dat = data;
    });

    initPlatformState();
  }

  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await FlutterDhlAmap.platformVersion;
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    dhl_aMapView = DHL_aMapView(dhlAMapViewModel: DHL_aMapView_Model(
      setZoomControlsEnabled: true,
      setCompassEnabled: true,
      setMyLocationButtonEnabled: true,
      setScaleControlsEnabled: true,
      setZoomGesturesEnabled: true,
    ));

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Row(
            children: <Widget>[
              RaisedButton(
                onPressed: () async {
                  dhl_aMapView.AddMarker(22.160258, 113.347154, "标题", "内容", "0", true); // 添加标注
                  dhl_aMapView.UpdateMarker(22.160257, 113.347154, "更新到了", "更新到了", "0"); // 更新标注
                  FlutterDhlAmap.Calculation_location(22.160258, 113.347154, 23.697839, 113.0441, 1); // 计算两点距离

                  // Map<dynamic, dynamic> dmap = await FlutterDhlAmap.changeLocation(22.160258, 113.347154, "baidu"); // 转换坐标
                },
                child: Text('Plugin example app:'),
              ),

              RaisedButton(
                onPressed: () {
                  dhl_aMapView.DelMarkerShow("0"); // 删除所有标注
                },
                child: Text('22222'),
              ),
            ],
          ),
        ),
        body: Center(
          child: dhl_aMapView,
        ),
      ),
    );
  }
}