Flutter高德地图展示插件amap_view_muka的使用

amap_view_muka

引入方式

在pubspec.yaml文件中添加依赖：

dependencies:
  amap_view_muka: ^0.1.0

支持的功能

显示地图

• ✅ 显示定位蓝点
• ✅ 显示室内地图
• ✅ 切换地图图层
• ✅ 使用离线地图（目前只支持官方UI）
• ✅ 显示英文地图
• ✅ 自定义地图（写了方法但不起作用，不知道啥问题）

与地图交互

• ✅ 控件交互
• ✅ 手势交互
• ✅ 调用方法交互
• ✅ 地图截屏功能

在地图上绘制

• ❌ 绘制点标记
• ❌ 绘制线
• ❌ 绘制面
• ❌ 绘制热力图
• ❌ 绘制3D模型
• ❌ 点平滑移动
• ❌ 绘制海量点图层

Android

在AndroidManifest.xml文件中添加以下代码：

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

iOS

在Info.plist文件中添加以下代码：

<!-- 默认 -->
<key>NSLocationWhenInUseUsageDescription</key>
<string>App需要您的同意,才能访问位置</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>App需要您的同意,才能访问位置</string>
<key>amap_key</key>
<string>你的key</string>

<!-- 导航 [后台持续定位只需要location] -->
<key>UIBackgroundModes</key>
<array>
    <string>location</string>
    <string>audio</string>
</array>

完整示例代码

以下是一个完整的示例代码，展示了如何使用amap_view_muka插件在Flutter中展示高德地图。

main.dart

import 'package:amap_location_muka/amap_location_muka.dart';
import 'package:flutter/material.dart';
import 'package:flutter_muka/flutter_muka.dart';
import 'package:permission_handler/permission_handler.dart';

import 'amap_search.dart';
import 'create_amap/amap.dart';
import 'create_amap/interactive.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化权限
  await [Permission.locationAlways, Permission.storage].request();

  // 设置高德地图API密钥
  AMapLocation.updatePrivacyAgree(true);
  AMapLocation.updatePrivacyShow(true, true);
  AMapLocation.setApiKey("6e630e675873f2a548f55ba99ee8c571", "56250708b9588800db63161534716f8c");

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('高德地图示例'),
        ),
        body: ListView(
          children: [
            Column(
              children: [
                // 创建地图
                ListItem(
                  title: Text('创建地图'),
                  showArrow: true,
                  color: Colors.white,
                  showDivider: true,
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => Amap()),
                    );
                  },
                ),
                // 与地图交互
                ListItem(
                  title: Text('与地图交互'),
                  showArrow: true,
                  color: Colors.white,
                  showDivider: true,
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => Interactive()),
                    );
                  },
                ),
                // 在地图上绘制
                ListItem(
                  title: Text('在地图上绘制'),
                  showArrow: true,
                  color: Colors.white,
                  showDivider: true,
                ),
                // 获取地图数据
                ListItem(
                  title: Text('获取地图数据'),
                  showArrow: true,
                  color: Colors.white,
                  showDivider: true,
                ),
                // 当前位置
                ListItem(
                  title: Text('当前位置'),
                  showArrow: true,
                  color: Colors.white,
                  showDivider: true,
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => AMapSearchLoc()),
                    );
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义列表项组件
class ListItem extends StatelessWidget {
  final String title;
  final bool showArrow;
  final Color color;
  final bool showDivider;
  final VoidCallback onTap;

  const ListItem({
    required this.title,
    this.showArrow = false,
    this.color = Colors.blue,
    this.showDivider = false,
    required this.onTap,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title, style: TextStyle(color: color)),
      trailing: showArrow ? Icon(Icons.arrow_right) : null,
      onTap: onTap,
      tileColor: Colors.grey[200],
      dense: true,
    );
  }
}