Flutter Map标记

Flutter Map是一个基于Flutter开发的地图插件，可以方便地在移动应用程序中添加地图功能。其中的标记功能可以让程序员在地图上添加自定义的标记，并且可以实现与标记相关的交互操作。

安装

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

dependencies:
  flutter_map: ^0.12.0

使用

添加地图

首先需要在Scaffold中添加一个FlutterMap Widget作为地图容器。在这个Widget中设置地图的中心坐标和缩放级别，也可以添加其他相关设置。例如：

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Map Example"),
      ),
      body: FlutterMap(
        options: MapOptions(
          center: LatLng(51.5, -0.09),
          zoom: 13.0,
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
            additionalOptions: {
              'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
              'id': 'mapbox/streets-v11',
            },
          ),
        ],
      ),
    );
  }
}

添加标记

使用MarkerLayerOptions在地图上添加标记，可以指定标记的坐标、图标、大小、角度等属性。可以在onTap回调函数中添加标记，并在child中定制标记的样式。例如：

class MyApp extends StatelessWidget {
  var markers = <Marker>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Map Example"),
      ),
      body: FlutterMap(
        options: MapOptions(
          center: LatLng(51.5, -0.09),
          zoom: 13.0,
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
            additionalOptions: {
              'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
              'id': 'mapbox/streets-v11',
            },
          ),
          MarkerLayerOptions(
            markers: markers,
            onTap: (point) => setState(() {
              markers.add(
                Marker(
                  width: 40.0,
                  height: 40.0,
                  point: point.latlng,
                  builder: (ctx) => Container(
                    child: Icon(Icons.location_on),
                  ),
                ),
              );
            }),
          ),
        ],
      ),
    );
  }
}

总结

Flutter Map标记功能可以让程序员方便地在地图上添加自定义的标记，并且可以实现与标记相关的交互操作。使用时需要引入flutter_map插件，并且采用MarkerLayerOptions在地图上添加标记。可以通过onTap回调函数实现点击地图添加标记的交互效果。