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和功能可以幫助開發者構建豐富的地圖應用程序。 但是在實踐中，開發者還需要根據實際的需求來動態調整地圖參數，以獲得更好的體驗和視覺效果。