Flutter高德地图开发详解

发布时间:2023-05-19

高德地图Flutter开发指南

一、高德地图Flutter

高德地图Flutter是一款基于Dart语言开发的地图应用程序接口。通过简单的配置,可以快速集成和开发高德地图应用程序。它包含了很多特性,如多点标记、定位、路线规划、海量点、获取海拔等,可以为开发者构建丰富的地图应用程序。下面我们来详细介绍几个高德地图Flutter应用程序API的具体使用。

二、Flutter高德地图多处定位

  1. 通过高德地图Flutter提供的定位功能,可以方便地获取设备的位置。首先,要在pubspec.yaml文件中添加高德地图Flutter插件。下面是示例代码:
dependencies:
  flutter:
    sdk: flutter
  amap_base: any  # 这里是最新版本,可根据实际情况更改版本
  1. 接下来,要执行以下步骤才能使用该插件。 ① 在 pubspec.yaml 文件里添加类库依赖:
    dependencies:
      amap_base: ^0.3.3
    
    ② 在 Dart 代码中导入类库:
    import 'package:amap_base/amap_base.dart';
    
    ③ 开始使用。 在使用定位之前需要确定你的手机GPS开启且获取到位置,可以直接调用Dart代码获取当前经纬度。可以通过在地图控制器上设置followingtrue属性,实现地图跟随定位移动。

三、Flutter高德地图路线规划

高德地图Flutter提供了步行、骑行、驾车API规划路线的功能,开发者可以根据需求使用API。

1. 步行规划的具体代码

Future<void> _getWalkingRoute() async {
  final result = await AmapSearch.instance.searchWalkingRoute(
      FromAndTo()
        ..from = LatLonPoint(39.993475, 116.473038)
        ..to = LatLonPoint(39.993847, 116.473285),
      null);
}

2. 骑行规划的具体代码

Future<void> _getRidingRoute() async {
  final result = await AmapSearch.instance.searchRidingRoute(
      FromAndTo()
        ..from = LatLonPoint(39.993475, 116.473038)
        ..to = LatLonPoint(39.993847, 116.473285),
      null);
}

3. 驾车规划的具体代码

Future<void> _getDrivingRoute() async {
  final result = await AmapSearch.instance.searchDrivingRoute(
      RoutePlanParam(
          from: LatLonPoint(39.993475, 116.473038),
          to: LatLonPoint(39.993847, 116.473285),
          mode: RoutePlanningMode.driving),
      null);
}

四、Flutter高德地图导航

高德地图Flutter提供了驾车和步行导航的API功能,开发者可以根据需求使用相应的API。

1. 步行导航的具体代码

Future<void> _getWalkingRoute() async {
  final result = await AmapSearch.instance.searchWalkingRoute(
      FromAndTo()
        ..from = LatLonPoint(39.993475, 116.473038)
        ..to = LatLonPoint(39.993847, 116.473285),
      null);
}

2. 驾车导航的具体代码

Future<void> _getDrivingRoute() async {
  final result = await AmapSearch.instance.searchDrivingRoute(
      RoutePlanParam(
          from: LatLonPoint(39.993475, 116.473038),
          to: LatLonPoint(39.993847, 116.473285),
          mode: RoutePlanningMode.driving),
      null);
}

五、Flutter高德地图海量点

高德地图Flutter提供了海量点的集成和显示功能,可以满足地图应用在海量数据情况下的需求。

1. 在地图标记中显示海量点

List<Marker> _markerList = [];
Future<void> _showMarkers() async {
  final LatLngBounds bounds = await controller?.getVisibleRegion();
  final List<LatLng> latLngs =
      bounds.toList().map((l) => LatLng(l.latitude, l.longitude)).toList();
  setState(() {
    _markerList = latLngs.map((latlng) {
      return Marker(
        latLng: latlng,
      );
    }).toList();
  });
}

2. 在地图上以热力图形式显示海量点

Future<void> _showHeatMap() async {
  final LatLngBounds bounds = await controller?.getVisibleRegion();
  final List<LatLng> latlngs =
      bounds.toList().map((l) => LatLng(l.latitude, l.longitude)).toList();
  final result = await AmapSearch.instance.searchHeatMap(
    LatLonQuad(
        lbLatLon: latlngs[0],
        ltLatLon: latlngs[1],
        rtLatLon: latlngs[2],
        rbLatLon: latlngs[3]),
    15, // 缩放比例
  );
}

六、Flutter高德地图获取海拔

通过高德地图Flutter获取地图上点的海拔高度信息。

Future<void> _getElevation() async {
  final result = await AmapSearch.instance.searchElevation(
      LatLonPoint(39.993475, 116.473038),
      elevationType: AmapSearchElevationType.ALL);
}

七、Flutter高德地图添加覆盖物

高德地图Flutter提供了不同类型的覆盖物,包括标注、Marker、地图工具条、图形等。可以使用API在地图上插入并定位覆盖物。

1. 在地图上插入并定位Marker

Future<void> _addMarker() async {
  setState(() {
    _markers.add(MarkerOptions(
      icon: 'images/restaurant.png',
      position: LatLng(39.993475, 116.473038),
    ));
  });
}

2. 在地图上绘制多边形

Future<void> _addPolygon() async {
  setState(() {
    _polygons.add(PolygonOptions(
      points: [
        LatLng(39.993475, 116.473038),
        LatLng(39.993847, 116.473285),
        LatLng(39.993887, 116.47365),
        LatLng(39.993475, 116.473038),
      ],
      strokeWidth: 2,
      strokeColor: Colors.red,
      fillColor: Colors.yellow,
    ));
  });
}

八、Flutter高德地图拖拽选址选取

高德地图Flutter提供了拖拽控件的功能,允许用户在地图上拖拽选择位置并获取坐标信息。

Future<void> _selectPosition() async {
  final result =
      await Navigator.push(context, MaterialPageRoute(builder: (context) {
    return SelectLocationPage(
      enableDragMap: true, // 启用地图拖拽
      mapType: _amapController?.mapType, // 设置地图类型
    );
  }));
  if (result != null) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text(
          '${result.latitude}, ${result.longitude} : ${result.address}'),
    ));
  }
}

经过上述介绍,我们可以看到高德地图Flutter提供了很多种有用的API和功能,这些API和功能可以帮助开发者构建丰富的地图应用程序。但是在实践中,开发者还需要根据实际的需求来动态调整地图参数,以获得更好的体验和视觉效果。