Flutter 接入高德地图：手把手保姆级教程

前言

随着移动互联网的蓬勃发展，地理信息服务已成为移动应用程序不可或缺的一部分。高德地图作为国内领先的地图服务商，提供了丰富的 API 和 SDK，帮助开发者轻松集成地图功能。本文将重点介绍如何在 Flutter 应用程序中接入高德地图，手把手指导开发者完成一系列操作，让高德地图为您的移动应用锦上添花。

环境准备

• Flutter SDK
• Android Studio 或 Visual Studio Code（用于 Android 开发）
• Xcode（用于 iOS 开发）
• 高德地图开发平台账号

1. 下载并配置高德地图 SDK

1.1 Android

• 登录 高德地图开发平台，创建项目并获取 Key。
• 在项目目录中创建 android/app/libs 文件夹。
• 从 Maven Central 下载高德地图 SDK 并解压到 android/app/libs 文件夹中。
• 在 android/app/build.gradle 文件中添加依赖项：

dependencies {
    implementation 'com.amap.api:location:2.5.0'
}

1.2 iOS

• 登录 高德地图开发平台，创建项目并获取 Key。
• 在 Xcode 中打开项目，转到 "Build Settings" -> "General" -> "Linked Frameworks and Libraries"，然后点击 "+" 按钮。
• 导航到高德地图 SDK 的 .framework 文件，并将其添加到项目中。
• 在 info.plist 文件中添加 AMapAPIKey，并将其值替换为您获取的 Key。

2. 初始化高德地图

2.1 Android

• 在 MainActivity.java 文件中，导入必要的库：

import com.amap.api.maps.AMap;
import com.amap.api.maps.MapView;

• 在 onCreate() 方法中，初始化地图视图并获取 AMap 对象：

public class MainActivity extends AppCompatActivity {
    private MapView mapView;
    private AMap aMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mapView = findViewById(R.id.map_view);
        mapView.onCreate(savedInstanceState);
        aMap = mapView.getMap();
    }
}

2.2 iOS

• 在 ViewController.swift 文件中，导入必要的库：

import MAMapKit

• 在 viewDidLoad() 方法中，创建地图视图并添加它到视图层次结构中：

class ViewController: UIViewController {
    private var mapView: MAMapView!

    override func viewDidLoad() {
        super.viewDidLoad()
        mapView = MAMapView(frame: view.bounds)
        view.addSubview(mapView)
    }
}

3. 显示地图

3.1 Android

• 在 onResume() 方法中，恢复地图视图：

@Override
protected void onResume() {
    super.onResume();
    mapView.onResume();
}

• 在布局文件中添加 MapView 组件：

<FrameLayout
    android:id="@+id/map_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.amap.api.maps.MapView
        android:id="@+id/map_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

3.2 iOS

• 在 viewWillAppear() 方法中，启动地图：

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    mapView.isZoomEnabled = true
    mapView.isScrollEnabled = true
}

4. 定位用户

4.1 Android

• 在 MainActivity.java 文件中，导入必要的库：

import com.amap.api.location.AMapLocationClient;
import com.amap.api.location.AMapLocationClientOption;
import com.amap.api.location.AMapLocationListener;

• 在 onCreate() 方法中，创建定位客户端并设置参数：

public class MainActivity extends AppCompatActivity {
    private AMapLocationClient locationClient;
    private AMapLocationListener locationListener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...
        locationClient = new AMapLocationClient(this);
        AMapLocationClientOption locationOption = new AMapLocationClientOption();
        locationOption.setLocationMode(AMapLocationClientOption.AMapLocationMode.Hight_Accuracy);
        locationOption.setInterval(2000);
        locationClient.setLocationOption(locationOption);
        locationListener = new AMapLocationListener() {
            @Override
            public void onLocationChanged(AMapLocation location) {}
        };
        locationClient.setLocationListener(locationListener);
        locationClient.startLocation();
    }
}

4.2 iOS

• 在 ViewController.swift 文件中，导入必要的库：

import CoreLocation

• 在 viewDidLoad() 方法中，创建位置管理器并设置参数：

class ViewController: UIViewController {
    private let locationManager = CLLocationManager()

    override func viewDidLoad() {
        super.viewDidLoad()
        locationManager.delegate = self
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
        locationManager.startUpdatingLocation()
    }
}

• 遵循 CLLocationManagerDelegate 协议以处理位置更新：

extension ViewController: CLLocationManagerDelegate {
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        if let location = locations.last {
            print("经度：\(location.coordinate.longitude), 纬度：\(location.coordinate.latitude)")
        }
    }
}

5. 导航

5.1 Android

• 在 MainActivity.java 文件中，导入必要的库：

import com.amap.api.navi.AMapNavi;
import com.amap.api.navi.model.AMapNaviInfo;

• 在 onCreate() 方法中，初始化导航管理器：

public class MainActivity extends AppCompatActivity {
    private AMapNavi navi;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ...
        navi = AMapNavi.getInstance(this);
    }
}

• 在 onResume() 方法中，恢复导航管理器：

@Override
protected void onResume() {
    super.onResume();
    navi.resumeNavi();
}

5.2 iOS

• 在 ViewController.swift 文件中，导入必要的库：

import AMapNaviKit

• 在 viewDidLoad() 方法中，初始化导航管理器：

class ViewController: UIViewController {
    private let naviManager = AMapNaviManager.shared()

    override func viewDidLoad() {
        super.viewDidLoad()
        naviManager.delegate = self
        naviManager.startup { (error) in
            if error != nil {
                print("导航初始化失败：\(error!)")
            }
        }
    }
}

• 遵循 AMapNaviManagerDelegate 协议以处理导航事件：

extension ViewController: AMapNaviManagerDelegate {
    func naviManager(_ naviManager: AMapNaviManager, onEvent event: AMapNaviManagerEvent) {
        switch event {
            case .naviRoutePlanFinish:
                let naviInfo = naviManager.naviRoutePlanInfo
                print("导航路线规划完成：\(naviInfo?.distance)")
            default:
                break