flutter_map如何使用

最近在学习Flutter地图开发，尝试使用flutter_map插件时遇到几个问题：

  1. 如何正确初始化地图并设置初始中心点和缩放级别？
  2. 添加标记点(Marker)的时候，除了默认图标能否使用自定义图片？具体代码怎么写？
  3. 想实现地图点击事件获取经纬度坐标，文档里提到的onTap回调该怎么使用？
  4. 离线地图功能是否支持？如果需要加载本地地图瓦片该怎么配置？

目前用的是flutter_map的最新版本，文档有些地方看不太明白，求有经验的朋友解答！

2 回复

FlutterMap 是一个 Flutter 地图插件，基于 Leaflet。使用步骤：

  1. 添加依赖：flutter_map: ^5.0.0
  2. 导入包：import 'package:flutter_map/flutter_map.dart';
  3. 在 Widget 中使用 FlutterMap，设置地图选项、图层和标记。
  4. 可配合 TileLayer 加载在线或离线瓦片地图。

更多关于flutter_map如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


FlutterMap 是基于 Leaflet 的 Flutter 地图插件，用于在应用中显示交互式地图。以下是基本使用方法：

1. 添加依赖

dependencies:
  flutter_map: ^6.1.0
  latlong2: ^0.8.1

2. 基本地图配置

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

FlutterMap(
  options: MapOptions(
    center: LatLng(51.509364, -0.128928), // 初始中心点（伦敦）
    zoom: 13.0, // 初始缩放级别
  ),
  children: [
    TileLayer(
      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
      userAgentPackageName: 'com.example.app',
    ),
  ],
)

3. 常用功能示例

添加标记

MarkerLayer(
  markers: [
    Marker(
      width: 80.0,
      height: 80.0,
      point: LatLng(51.509364, -0.128928),
      builder: (ctx) => Icon(Icons.location_on, color: Colors.red),
    ),
  ],
)

添加多边形

PolygonLayer(
  polygons: [
    Polygon(
      points: [
        LatLng(51.5, -0.13),
        LatLng(51.5, -0.12),
        LatLng(51.49, -0.12),
      ],
      color: Colors.blue.withOpacity(0.3),
      borderColor: Colors.blue,
      borderStrokeWidth: 2,
    ),
  ],
)

4. 地图交互

MapOptions(
  onTap: (tapPosition, latlng) {
    print('点击位置: $latlng');
  },
  onLongPress: (tapPosition, latlng) {
    print('长按位置: $latlng');
  },
)

5. 使用不同地图源

  • OpenStreetMap：'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
  • Mapbox：需要 API token
  • Google Maps：需要额外插件

注意事项

  • 确保在 Android 和 iOS 中配置网络权限
  • 生产环境使用合规的地图服务
  • 考虑添加 attribution 显示地图数据来源

这是 FlutterMap 的基本用法，可根据需要添加更多图层和交互功能。

回到顶部