Flutter地图功能插件ptwcode_map的使用

ptwcode_map 是一个高度可配置的 Flutter 地图插件，支持多种功能，如标记、自定义标记、聚类、自定义聚类、用户位置、折线、自定义折线、初始位置和自定义大小等。它非常适合需要灵活控制地图展示的应用。

示例

首先，我们来看一下 ptwcode_map 的演示效果：

开始使用

要开始使用 ptwcode_map，你可以参考其官方示例应用。以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 ptwcode_map。

示例代码

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:ptwcode_map/ptwcode_map.dart';

// 假设这些是从其他文件导入的数据
import 'env.dart';
import 'locations.dart';
import 'ui/bottom.dart';
import 'ui/cluster.dart';
import 'ui/marker_wi.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _ctrl = MapCtrl();
  var _markers = allMarkers; // 初始标记数据
  var _pLines = allPolylines; // 初始折线数据
  var _debugMode = false; // 调试模式
  var _clusterMode = false; // 聚类模式

  // 切换标记数据
  void _onTapSwitchMarkers() {
    if (_markers.length == 15) return setState(() => _markers = markers1);
    if (_markers == markers1) return setState(() => _markers = markers2);
    if (_markers == markers2) return setState(() => _markers = markers3);
    if (_markers == markers3) setState(() => _markers = allMarkers);
  }

  // 切换调试模式
  void _toggleDebugMode() => setState(() => _debugMode = !_debugMode);

  // 切换聚类模式
  void _toggleClusterMode() => setState(() => _clusterMode = !_clusterMode);

  // 切换折线数据
  void _onTapSwitchLines() {
    if (_pLines.length == 3) return setState(() => _pLines = polylines1);
    if (_pLines == polylines1) return setState(() => _pLines = polylines2);
    if (_pLines == polylines2) return setState(() => _pLines = polylines3);
    if (_pLines == polylines3) setState(() => _pLines = allPolylines);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    Widget current = PTWCodeMap(
      ctrl: _ctrl,
      user: mapUser,
      styleId: mapStyleId,
      accessToken: mapAccessToken,
      gps: myGps,
      markers: _markers,
      debugMode: _debugMode,
      markerBuilder: (size, data) => MarkerWi(size: size, data: data),
      enableCluster: _clusterMode,
      clusterBuilder: (count, size) => Cluster(count: count, size: size),
      polylines: _pLines,
      // heading: 90,
      // initPos: LatLon(41.50758338587537, 19.794688975005975),
      // initZoom: 16,
      // width: 300,
      // height: 250,
      // enableTouch: false,
      // northBound: LatLon(41.35175048872195, 19.806819300964158),
      // southBound: LatLon(41.297166569919106, 19.837698729186002),
      // eastBound: LatLon(41.33577699035093, 19.871467143008942),
      // westBound: LatLon(41.329099337693435, 19.783003826896167),
      // markerRadius: 16,
      // clusterRadius: 48,
      // placeMarkerAbovePolyline: false,
    );

    current = Stack(
      children: [
        current,
        Bottom(
          ctrl: _ctrl,
          activeMarkers: _markers.map((el) => el.latLon).toList(),
          onTapSwitchMarkers: _onTapSwitchMarkers,
          debugMode: _debugMode,
          toggleDebugMode: _toggleDebugMode,
          clusterMode: _clusterMode,
          toggleClusterMode: _toggleClusterMode,
          onTapSwitchLines: _onTapSwitchLines,
        ),
      ],
    );

    return Scaffold(
      body: Column(
        children: [
          SizedBox(height: topPadding(context)),
          Expanded(child: current),
        ],
      ),
    );
  }
}

// 获取顶部填充高度
double topPadding(BuildContext context) {
  final mQ = MediaQuery.of(context);
  return (!kIsWeb && Platform.isMacOS) ? 28 : mQ.padding.top;
}