【亲测免费】 高德地图Flutter插件安装与配置全攻略

项目基础介绍

flutter_amap 是一款专为Flutter开发者设计的高德地图集成插件，它允许你在Flutter应用中无缝嵌入高德地图的功能。这款插件支持Android和iOS双平台，方便开发者在Flutter框架下轻松实现地图展示、定位等功能，无需额外创建Activity或Controller。项目采用了Dart作为主要编程语言，并且在Android部分使用Java，iOS部分涉及Objective-C。

关键技术和框架

• 关键技术: 高德地图API，Flutter插件开发机制。
• 框架: Flutter框架配合高德地图SDK，利用Flutter的跨平台特性，结合高德地图的强大服务，实现了高度集成的地图功能。

准备工作与详细安装步骤

第一步：获取高德地图API密钥

1. 访问高德开放平台：http://lbs.amap.com，注册或登录账号。
2. 创建新应用，根据提示申请Android和iOS的API密钥。注意保存好获得的密钥。

第二步：环境要求

确保你的开发环境已准备就绪：

• Flutter SDK 已安装并配置。
• Android Studio 或 Xcode 安装最新版本，并配置相应的Android和iOS模拟器或真实设备。

第三步：引入flutter_amap插件

1. 打开你的Flutter项目中的pubspec.yaml文件。
2. 添加以下依赖到dependencies区域：

   dependencies:
     flutter_amap: ^0.0.1
   

3. 运行flutter pub get以下载和安装插件。

第四步：Android配置

• 打开android/app/src/main/AndroidManifest.xml，添加下面的元数据标签至<application>标签内，替换“你的Key”为实际的Android API密钥：

  <meta-data
      android:name="com.amap.api.v2.apikey"
      android:value="你的Android Key"/>
  

• 在同一文件内，添加必要的权限：

  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <!-- ...其他所需权限... -->
  

• 在android/build.gradle文件中，确保你的编译SDK版本与Flutter兼容。

第五步：iOS配置

• 在iOS的Runner/Info.plist文件中加入定位使用的描述：

  <key>NSLocationWhenInUseUsageDescription</key>
  <string>应用需要您的位置信息来提供服务。</string>
  

• 在项目的主入口文件（通常是main.dart），导入flutter_amap并设置iOS API密钥：

  import 'package:flutter_amap/flutter_amap.dart';
  
  void main() {
    FlutterAmap.setApiKey("你的iOS Key");
    runApp(MyApp());
  }
  

第六步：基本使用示例

1. 在你需要展示地图的页面导入插件：

   import 'package:flutter_amap/flutter_amap.dart';
   

2. 实例化FlutterAmap并展示地图：

   FlutterAmap amap = FlutterAmap();
   amap.show(
     mapview: AMapView(
       centerCoordinate: LatLng(39.9242, 116.3979),
       zoomLevel: 13.0,
       mapType: MapType.night,
       showsUserLocation: true,
     ),
     title: TitleOptions(title: "北京地图"),
   );
   

至此，您已经完成了flutter_amap插件的安装与配置，可以开始在Flutter应用中享受高德地图的功能了。记得在实际开发过程中，根据具体需求调整地图配置和权限。