Flutter中的Polyline：绘制路线图

Flutter中的Polyline：绘制路线图

5 回复

Polyline用于在地图上绘制多段线，定义一系列坐标点连接成线。

更多关于Flutter中的Polyline：绘制路线图的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用Polyline类可以绘制路线图。通过google_maps_flutter插件，传入一组经纬度点即可实现。

在Flutter中，可以使用google_maps_flutter插件绘制路线图。首先，添加插件依赖，然后在地图上使用Polyline类绘制路线。你需要提供一组LatLng坐标点，并设置颜色、宽度等属性。示例如下：

import 'package:google_maps_flutter/google_maps_flutter.dart';

Set<Polyline> polylines = {
  Polyline(
    polylineId: PolylineId('route1'),
    points: [
      LatLng(37.7749, -122.4194),
      LatLng(34.0522, -118.2437),
    ],
    color: Colors.blue,
    width: 5,
  ),
};

将polylines传递给GoogleMap的polylines参数即可显示路线。

Polyline用于在地图上绘制线段，如路线。设置其坐标和样式即可。

在Flutter中，你可以使用google_maps_flutter插件来绘制路线图，并通过Polyline来表示路线。Polyline是一系列连接的线段，通常用于在地图上绘制路径或路线。

实现步骤：

  1. 添加依赖： 首先，在pubspec.yaml文件中添加google_maps_flutter插件的依赖。

    dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.10

  2. 初始化地图： 在Flutter应用中初始化Google Maps，并设置初始位置。

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? mapController;
  final LatLng _center = const LatLng(37.7749, -122.4194); // 初始位置 (旧金山)

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Polyline Example'),
      ),
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
        polylines: _createPolylines(),
      ),
    );
  }

  Set<Polyline> _createPolylines() {
    return {
      Polyline(
        polylineId: PolylineId('route1'),
        points: [
          LatLng(37.7749, -122.4194), // 起点
          LatLng(37.7849, -122.4294), // 中间点
          LatLng(37.7949, -122.4394), // 终点
        ],
        color: Colors.blue,
        width: 5,
      ),
    };
  }
}

  3. 运行应用： 运行应用后，你将看到地图上绘制了一条蓝色的折线，表示从起点到终点的路线。

关键点：

  • Polyline：用于绘制折线，可以设置颜色、宽度、点集等属性。
  • LatLng：表示地理坐标，包含纬度和经度。
  • GoogleMap：Flutter中用于显示Google地图的组件。

通过这种方式，你可以在Flutter应用中轻松绘制路线图。

回到顶部