Flutter地图绘制插件draw_on_map的使用

Flutter 地图绘制插件 draw_on_map 的使用

draw_on_map 是一个用于通过手绘在地图上绘制路线的 Flutter 包。

开始使用

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

dependencies:
  draw_on_map: ^0.0.1

2. 获取包

flutter packages get

3. 导入包

import 'package:draw_on_map/draw_on_map.dart';

示例代码

以下是一个简单的示例代码，展示如何使用 draw_on_map 插件来在地图上绘制手绘路径。

import 'package:flutter/material.dart';
import 'package:draw_on_map/draw_on_map.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('draw_on_map 使用示例')),
        body: MapSample(),
      ),
    );
  }
}

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

class _MapSampleState extends State<MapSample> {
  // 定义一个控制器来管理地图状态
  final DrawOnMapController _controller = DrawOnMapController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          // 添加一个按钮来清空地图上的绘制内容
          ElevatedButton(
            onPressed: () {
              _controller.clear();
            },
            child: Text('清除绘制内容'),
          ),
          // 使用 DrawOnMap 组件来显示地图并允许用户手绘路径
          DrawOnMap(
            controller: _controller,
            initialCameraPosition: CameraPosition(
              target: LatLng(37.7749, -122.4194), // 设置初始中心点
              zoom: 12, // 设置初始缩放级别
            ),
            onDrawEnd: (List<LatLng> points) {
              // 手绘结束后处理绘制的路径
              print('绘制的路径: $points');
            },
          ),
        ],
      ),
    );
  }
}

更多关于Flutter地图绘制插件draw_on_map的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地图绘制插件draw_on_map的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


draw_on_map 是一个 Flutter 插件，允许用户在地图上绘制形状、线条、标记等。它是一个非常有用的工具，特别适用于需要用户在地图上进行交互的场景，如标记路线、区域选择等。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 draw_on_map 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  draw_on_map: ^0.0.1  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

以下是一个简单的示例，展示如何使用 draw_on_map 插件在地图上绘制形状和线条。

import 'package:flutter/material.dart';
import 'package:draw_on_map/draw_on_map.dart';
import 'package:latlong2/latlong.dart';  // 用于处理地理坐标

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Draw on Map Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapDrawingScreen(),
    );
  }
}

class MapDrawingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draw on Map'),
      ),
      body: DrawOnMap(
        initialCenter: LatLng(37.7749, -122.4194),  // 初始地图中心位置
        initialZoom: 13.0,  // 初始缩放级别
        onDrawingComplete: (List<LatLng> points) {
          // 当用户完成绘制时调用
          print('绘制完成，点列表：$points');
        },
        drawingOptions: DrawingOptions(
          lineColor: Colors.red,
          lineWidth: 5.0,
          fillColor: Colors.blue.withOpacity(0.5),
        ),
      ),
    );
  }
}

主要功能

  1. 绘制形状：用户可以通过点击地图来绘制多边形。
  2. 绘制线条：用户可以通过拖动来绘制线条。
  3. 删除形状：可以通过编程方式删除已绘制的形状。
  4. 自定义样式：可以自定义线条颜色、宽度、填充颜色等。

方法说明

  • onDrawingComplete(List<LatLng> points)：当用户完成绘制时触发，返回绘制的点列表。
  • clearDrawing()：清除所有绘制的形状。
  • setDrawingOptions(DrawingOptions options)：设置绘制的样式选项。

示例：自定义绘制样式

你可以通过 DrawingOptions 来自定义绘制的样式：

DrawingOptions(
  lineColor: Colors.green,
  lineWidth: 3.0,
  fillColor: Colors.yellow.withOpacity(0.3),
);

示例：清除绘制

你可以在任何时候清除所有绘制的形状：

DrawOnMapController controller;

controller.clearDrawing();
回到顶部