Flutter如何引入高德地图map3.0并添加标注

“在Flutter项目中集成高德地图Map3.0时遇到问题，按照官方文档配置后地图能正常显示，但无法成功添加自定义标注点。想请教：1) pubspec.yaml中除了amap_flutter_map还需要添加哪些依赖？2) 标注点的Icon应该如何自定义？3) 添加标注的代码是否需要放在特定生命周期？目前调用addMarker方法后控制台没有报错，但地图上始终不显示标注。”

2 回复

在Flutter中引入高德地图3.0并添加标注：

  1. 添加依赖：amap_flutter_map: ^3.0.0
  2. 配置Android/iOS密钥
  3. 使用AMapWidget
  4. 通过Markers属性添加标注

示例：

AMapWidget(
  markers: Set<Marker>.from([
    Marker(
      position: LatLng(39.909, 116.397),
      icon: BitmapDescriptor.defaultMarker,
    ),
  ]),
)

更多关于Flutter如何引入高德地图map3.0并添加标注的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中引入高德地图3.0并添加标注，需要以下步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  amap_flutter_map: ^3.0.0

2. 配置权限（Android）

在 android/app/src/main/AndroidManifest.xml 中添加：

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

<!-- 在高德开发者平台申请的key -->
<meta-data
  android:name="com.amap.api.v2.apikey"
  android:value="您的Android端Key" />

3. iOS配置

在 ios/Runner/Info.plist 中添加：

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要定位权限</string>

<!-- 高德地图Key -->
<key>MAMapApiKey</key>
<string>您的iOS端Key</string>

4. 基本使用代码

import 'package:amap_flutter_map/amap_flutter_map.dart';
import 'package:amap_flutter_base/amap_flutter_base.dart';

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  static final LatLng _center = LatLng(39.90960, 116.397228); // 北京天安门
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AMapWidget(
        apiKey: const AMapApiKey(
          iosKey: '您的iOS端Key',
          androidKey: '您的Android端Key',
        ),
        initialCameraPosition: CameraPosition(target: _center, zoom: 15),
        markers: Set<Marker>.from([
          Marker(
            position: _center,
            icon: BitmapDescriptor.defaultMarker,
            infoWindow: InfoWindow(
              title: '天安门',
              snippet: '北京市东城区',
            ),
          ),
        ]),
      ),
    );
  }
}

5. 自定义标注图标

Marker(
  position: LatLng(39.90960, 116.397228),
  icon: BitmapDescriptor.fromAssetImage(
    ImageConfiguration(size: Size(48, 48)),
    'assets/marker.png', // 自定义图标路径
  ),
)

注意事项：

  1. 需要在高德开放平台申请Key
  2. 不同平台需要分别申请iOS和Android的Key
  3. 确保权限配置正确
  4. 自定义图标建议使用png格式

这样就完成了高德地图的引入和标注添加。记得在真机上测试，模拟器可能无法正常显示地图。

回到顶部