您的位置:

Flutter高德地图开发详解

一、高德地图Flutter

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

二、Flutter高德地图多处定位

1、 通过高德地图Flutter提供的定位功能,可以方便地获取设备的位置。首先,要在pubspec.yaml文件中添加高德地图Flutter插件。下面是示例代码:

dependencies:
  flutter:
    sdk: flutter
  amap_base: any

2、接下来,要执行以下步骤才能使用该插件。

① 在 pubspec.yaml 文件里添加类库依赖:

dependencies:
  amap_base: ^0.3.3

② 在 Dart 代码中导入类库:

import 'package:amap_base/amap_base.dart';

③ 开始使用。

在使用定位之前需要确定你的手机GPS开启且获取到位置,可以直接调用Dart代码获取当前经纬度。可以通过在地图控制器上设置following和true属性,实现地图跟随定位移动。

三、Flutter高德地图路线规划

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

1、步行规划的具体代码

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

  

2、骑行规划的具体代码

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

  

3、驾车规划的具体代码

  Future _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 _getWalkingRoute() async {
    final result = await AmapSearch.instance.searchWalkingRoute(
        FromAndTo()
          ..from = LatLonPoint(39.993475, 116.473038)
          ..to = LatLonPoint(39.993847, 116.473285),
        null);
  }

  

2、驾车导航的具体代码

  Future _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 _markerList = [];

  Future
    _showMarkers() async {
    final LatLngBounds bounds = await controller?.getVisibleRegion();
    final List
     latLngs =
        bounds.toList().map((l) => LatLng(l.latitude, l.longitude)).toList();

    setState(() {
      _markerList = latLngs.map((latlng) {
        return Marker(
          latLng: latlng,
        );
      }).toList();
    });
  }

    
   
  

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

  Future _showHeatMap() async {
    final LatLngBounds bounds = await controller?.getVisibleRegion();
    final List
    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 _getElevation() async {
    final result = await AmapSearch.instance.searchElevation(
        LatLonPoint(39.993475, 116.473038),
        elevationType: AmapSearchElevationType.ALL);
  }

  

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

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

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

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

  

2、在地图上绘制多边形

  Future _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 _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和功能可以帮助开发者构建丰富的地图应用程序。 但是在实践中,开发者还需要根据实际的需求来动态调整地图参数,以获得更好的体验和视觉效果。