Flutter地图展示插件amap_map的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter地图展示插件amap_map的使用

简介

amap_map 是一个基于高德开放平台地图 SDK的 Flutter 插件,旨在为开发者提供便捷的地图集成解决方案。本插件是在 amap_flutter_map 3.0.0 的基础上进行二次开发,以解决原插件长期未更新和功能局限的问题。

支持平台与SDK版本

平台 AMapSDK版本 支持系统版本
Android 10.0.800_loc6.4.5_sea9.7.2 SDK 16+
iOS 10.0.900 12.0+

使用方法

添加依赖

在您的 Flutter 项目中添加 amap_map 依赖:

flutter pub add amap_map

准备工作

  1. 申请 API Key:前往高德开放平台官网注册账号并申请 API Key。

  2. 初始化组件 在应用启动的第一个 Widget 中初始化 AMapInitializer,确保传入正确的 API Key 和隐私声明。

    import 'package:amap_map/amap_map.dart';
    import 'package:x_amap_base/x_amap_base.dart';
    
    class DemoWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        AMapInitializer.init(context, apiKey: ConstConfig.amapApiKeys);
        AMapInitializer.updatePrivacyAgree(ConstConfig.amapPrivacyStatement);
    
        return Scaffold(
          // ...其他代码
        );
      }
    }
    

示例代码

下面是一个完整的示例,展示了如何在一个页面中显示地图,并设置初始位置为中国北京(经纬度:39.909187, 116.397451):

import 'package:flutter/material.dart';
import 'package:amap_map/amap_map.dart';
import 'package:x_amap_base/x_amap_base.dart';

void main() {
  runApp(MaterialApp(
    themeMode: ThemeMode.light,
    home: ShowMapPage("地图示例", "展示如何使用amap_map"),
  ));
}

class ShowMapPage extends BasePage {
  ShowMapPage(String title, String subTitle) : super(title, subTitle);

  @override
  Widget build(BuildContext context) {
    return _ShowMapPageBody();
  }
}

class _ShowMapPageBody extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ShowMapPageState();
}

class _ShowMapPageState extends State<_ShowMapPageBody> {
  static final CameraPosition _kInitialPosition = const CameraPosition(
    target: LatLng(39.909187, 116.397451),
    zoom: 10.0,
  );

  AMapController? _mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("高德地图")),
      body: ConstrainedBox(
        constraints: BoxConstraints.expand(),
        child: AMapWidget(
          initialCameraPosition: _kInitialPosition,
          onMapCreated: (controller) {
            setState(() {
              _mapController = controller;
            });
          },
        ),
      ),
    );
  }

  void onMapCreated(AMapController controller) {
    setState(() {
      _mapController = controller;
    });
  }
}

地图视图配置

AMapWidget 提供了丰富的属性来定制地图显示效果,如地图类型、自定义样式、定位蓝点等。以下是部分常用属性说明:

  • initialCameraPosition: 初始化时的地图中心点及缩放级别。
  • mapType: 设置地图类型(标准、卫星、夜间模式等)。
  • myLocationStyleOptions: 定位蓝点样式配置。
  • trafficEnabled: 是否开启交通路况信息。
  • markers, polylines, polygons: 可以在地图上添加标记、折线或区域多边形。
  • onTap, onLongPress, onPoiTouched: 响应地图上的点击事件。

地图控制器

通过 AMapController 可以动态调整地图状态,例如移动摄像头、截图、清除缓存等操作。具体API如下:

  • moveCamera: 修改当前视角。
  • takeSnapshot: 获取当前地图快照。
  • clearDisk: 清除离线缓存。
  • toScreenCoordinate, fromScreenCoordinate: 实现地理坐标与屏幕坐标的相互转换。

注意事项

对于 Android 平台,当 app 的 targetSDKVersion >= 30 时,可能会遇到地图页返回闪退的问题。可以在 AndroidManifest.xml 文件中的 <application> 标签下添加 android:allowNativeHeapPointerTagging="false" 来解决此问题。

以上就是关于 amap_map 插件的基本介绍和使用指南,希望能帮助您快速集成高德地图到Flutter应用中。如果有任何疑问或建议,请随时联系作者或者查看官方文档获取更多信息。


更多关于Flutter地图展示插件amap_map的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地图展示插件amap_map的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter中使用amap_map插件来展示高德地图的代码示例。这个示例将展示如何初始化地图、设置地图的中心点以及如何添加一些基本的地图控件。

首先,你需要在你的Flutter项目中添加amap_map依赖。在你的pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  amap_map: ^x.y.z  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖。

接下来,你需要获取高德地图的API密钥,并将其配置到你的项目中。你可以在高德地图开发者平台申请一个API密钥,并将其添加到你的android/app/src/main/AndroidManifest.xmlios/Runner/Info.plist文件中。

对于Android,添加以下权限和API密钥:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

    <application
        ... >
        <meta-data
            android:name="com.amap.api.v2.apikey"
            android:value="你的高德API密钥"/>
        ...
    </application>
</manifest>

对于iOS,在Info.plist中添加以下配置:

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>AMapAPIKey</key>
<string>你的高德API密钥</string>

然后,在你的Flutter代码中,你可以按照以下方式使用amap_map插件:

import 'package:flutter/material.dart';
import 'package:amap_map_fluttify/amap_map_fluttify.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter AMap Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  AMapController? _mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter AMap Demo'),
      ),
      body: AMapWidget(
        apiKey: '你的高德API密钥', // 确保在这里填入你的API密钥
        onMapCreated: (AMapController controller) {
          _mapController = controller;
          // 设置地图中心点
          _mapController?.moveCamera(CameraUpdateFactory.newLatLng(LatLng(39.906901, 116.397972)));
        },
        options: AMapOptions(
          zoom: 14.0,
          mapType: AMapMapType.normal,
          showTraffic: true,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_mapController != null) {
            // 添加一个标记
            _mapController?.addMarker(
              MarkerOptions(
                position: LatLng(39.906901, 116.397972),
                title: "Beijing",
                snippet: "Capital of China",
              ),
            );
          }
        },
        tooltip: 'Add Marker',
        child: Icon(Icons.add),
      ),
    );
  }
}

这个示例展示了如何创建一个简单的Flutter应用,该应用包含一个高德地图,并能够在地图上设置中心点、显示交通信息以及添加一个标记。

请注意,你需要确保你已经正确配置了API密钥,并且你的项目已经获得了必要的权限。此外,由于高德地图的API可能会更新,建议查阅最新的amap_map_fluttify插件文档以获取最新的使用方法和API。

回到顶部