如何在mapsforge_flutter中添加标记？

我完全理解你在使用mapsforge_flutter时找不到添加标记清晰示例的困扰，其实用MarkerOverlay就能轻松实现这个需求，下面给你一步步的指导和完整的代码示例：

核心思路 #

mapsforge_flutter中通过MarkerOverlay来管理地图上的所有标记，每个标记对应一个Marker对象，你可以自定义标记的位置（经纬度）和显示的UI样式。

完整代码示例 #

下面是一个可以直接运行的示例，包含加载离线地图、添加多个自定义标记的逻辑：

import 'package:flutter/material.dart';
import 'package:mapsforge_flutter/core.dart';
import 'package:mapsforge_flutter/maps.dart';

class MapWithMarkers extends StatefulWidget {
  const MapWithMarkers({Key? key}) : super(key: key);

  @override
  State<MapWithMarkers> createState() => _MapWithMarkersState();
}

class _MapWithMarkersState extends State<MapWithMarkers> {
  late MapController _mapController;
  late List<Marker> _markers;
  late MarkerOverlay _markerOverlay;

  @override
  void initState() {
    super.initState();
    // 初始化地图控制器，设置初始显示位置
    _mapController = MapController(
      mapPosition: MapPosition(
        latitude: 51.5074, // 示例：伦敦市中心纬度
        longitude: -0.1278, // 示例：伦敦市中心经度
        zoomLevel: ZoomLevel(14),
      ),
    );

    // 创建标记集合：每个Marker对应一个经纬度和自定义UI
    _markers = [
      // 自定义圆形标记
      Marker(
        latLng: LatLng(51.5074, -0.1278),
        widget: Container(
          width: 32,
          height: 32,
          decoration: const BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.all(Radius.circular(16)),
            boxShadow: [BoxShadow(color: Colors.black38, blurRadius: 4)],
          ),
          child: const Center(
            child: Text(
              'A',
              style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
      // 使用系统图标作为标记
      Marker(
        latLng: LatLng(51.5080, -0.1285),
        widget: const Icon(Icons.location_pin, color: Colors.blue, size: 40),
      ),
    ];

    // 创建MarkerOverlay，管理所有标记的渲染
    _markerOverlay = MarkerOverlay(
      markers: _markers,
      overlayController: OverlayController(),
    );
  }

  // 动态添加标记的示例方法
  void _addNewMarker() {
    setState(() {
      _markers.add(Marker(
        latLng: LatLng(51.5090, -0.1290),
        widget: const Icon(Icons.place, color: Colors.green, size: 35),
      ));
      // 更新Overlay的标记列表
      _markerOverlay.markers = _markers;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Mapsforge 标记示例'),
        actions: [
          IconButton(
            icon: const Icon(Icons.add_location),
            onPressed: _addNewMarker,
            tooltip: '添加新标记',
          )
        ],
      ),
      body: MapsforgeMap(
        mapController: _mapController,
        mapFile: const MapFile('assets/maps/your_offline_map.map'), // 替换为你的离线地图路径
        overlays: [_markerOverlay], // 将标记Overlay添加到地图
      ),
    );
  }
}

关键部分说明 #

• Marker对象：每个标记需要指定latLng（经纬度位置）和widget（标记的UI组件），你可以用任何Flutter Widget来定义标记样式，比如图片、图标、自定义容器等。
• MarkerOverlay：这是标记的容器，负责管理所有标记的渲染和更新，需要传入标记列表和OverlayController（用于控制Overlay的显示/隐藏等操作）。
• 添加到地图：在MapsforgeMap的overlays参数中加入创建好的MarkerOverlay，标记就会显示在地图上方。

动态更新标记 #

如果需要动态添加或删除标记，只需要修改_markers列表，然后调用setState并更新_markerOverlay.markers即可，就像示例中的_addNewMarker方法那样。

如果遇到问题，建议检查你使用的mapsforge_flutter版本是否为较新版本，旧版本的API可能存在差异哦。

内容来源于stack exchange