Flutter地图与位置服务插件woosmap_flutter的使用

Woosmap Flutter SDK简介

Woosmap Flutter SDK是一个库，可以直接在您的应用程序中嵌入交互式地图。您还可以向地图添加商店图层以突出兴趣点并获取相关信息。

该SDK提供了一个接口来管理室内地图视图并在地图上订阅事件。

请从您的专业账户中获取电子邮件和令牌。如果需要，您可以申请一个，或者如果您时间紧迫，可以使用我们的开发者凭据进行测试。

平台支持

平台	最低版本
Android	33+
iOS	13.0+

使用方法

在pubspec.yaml文件中添加woosmap_flutter作为依赖项。

flutter pub add woosmap_flutter

有关更多功能描述和实现指南，请参阅Woosmap开发者文档。如果您正在寻找Woosmap Flutter插件的文档，我们也有一个专门的部分介绍它：Flutter插件文档。

示例代码

下面是一个完整的示例应用，展示了如何使用woosmap_flutter插件创建一个带有地图和事件日志的应用程序。

`example/lib/main.dart`

import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:woosmap_flutter/woosmap_flutter.dart';
import 'constants.dart';
import 'Screens/snippet_list.dart';

void main() {
  runApp(const AppConstants(
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  static const String _title = 'Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: ListWoosmapPluginSample(),
    );
  }
}

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

  @override
  State<ExampleSnippet> createState() => _ExampleSnippetState();
}

class _ExampleSnippetState extends State<ExampleSnippet> {
  WoosmapController? _controller;
  TextEditingController? txtLogController;

  @override
  void initState() {
    super.initState();
    txtLogController = TextEditingController();
    if (_controller != null) {
      debugPrint("info ====> Indoor controller not initialize");
    }
  }

  @override
  void dispose() {
    txtLogController?.dispose();
    super.dispose();
  }

  Future<void> reloadMenu() async {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Woosmap app (Events)'),
        actions: <Widget>[
          ExampleMenu(webViewController: _controller),
        ],
      ),
      body: SafeArea(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Align(
                alignment: const AlignmentDirectional(-1, -1),
                child: WoosmapMapViewWidget(
                  wooskey: Platform.isAndroid
                      ? AppConstants.of(context)?.privateKeyAndroid ?? ""
                      : AppConstants.of(context)?.privateKeyiOS ?? "",
                  onRef: (p0) async {
                    _controller = p0;
                    reloadMenu();
                  },
                  mapOptions: const {
                    "center": {"lat": 19.115932, "lng": 72.907852},
                    "zoom": 10
                  },
                  click: (message) {
                    txtLogController?.text =
                        "Click, ${txtLogController?.text}";
                  },
                  bounds_changed: () {
                    txtLogController?.text =
                        "bounds_changed, ${txtLogController?.text}";
                  },
                  center_changed: () {
                    txtLogController?.text =
                        "center_changed, ${txtLogController?.text}";
                  },
                  dblclick: (m) {
                    txtLogController?.text =
                        "dblclick, ${txtLogController?.text}";
                  },
                  drag: () {
                    txtLogController?.text =
                        "drag, ${txtLogController?.text}";
                  },
                  dragend: () {
                    txtLogController?.text =
                        "dragend, ${txtLogController?.text}";
                  },
                  dragstart: () {
                    txtLogController?.text =
                        "dragstart, ${txtLogController?.text}";
                  },
                  idle: () {
                    debugPrint("idle");
                  },
                  mousemove: (x) {
                    txtLogController?.text =
                        "mousemove, ${txtLogController?.text}";
                  },
                  mouseout: (x) {
                    txtLogController?.text =
                        "mouseout, ${txtLogController?.text}";
                  },
                  mouseover: (x) {
                    txtLogController?.text =
                        "mouseover, ${txtLogController?.text}";
                  },
                  rightclick: (x) {
                    txtLogController?.text =
                        "rightclick, ${txtLogController?.text}";
                  },
                  zoom_changed: () {
                    txtLogController?.text =
                        "zoom_changed, ${txtLogController?.text}";
                  },
                ),
              ),
            ),
            Container(
              width: 100,
              height: 100,
              decoration: const BoxDecoration(
                color: Color(0xFFDEE6E6),
              ),
              child: Column(mainAxisSize: MainAxisSize.max, children: [
                Expanded(
                  child: Padding(
                    padding: const EdgeInsetsDirectional.fromSTEB(10, 5, 10, 5),
                    child: TextFormField(
                      controller: txtLogController,
                      minLines: null,
                      maxLines: null,
                      autofocus: true,
                      enabled: false,
                      obscureText: false,
                      decoration: const InputDecoration(
                        labelText: 'Events Log\n',
                        hintText: 'Event fired',
                        enabledBorder: UnderlineInputBorder(
                          borderSide: BorderSide(
                            color: Color(0x00000000),
                            width: 1,
                          ),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(4.0),
                            topRight: Radius.circular(4.0),
                          ),
                        ),
                        focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(
                            color: Color(0x00000000),
                            width: 1,
                          ),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(4.0),
                            topRight: Radius.circular(4.0),
                          ),
                        ),
                        errorBorder: UnderlineInputBorder(
                          borderSide: BorderSide(
                            color: Color(0x00000000),
                            width: 1,
                          ),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(4.0),
                            topRight: Radius.circular(4.0),
                          ),
                        ),
                        focusedErrorBorder: UnderlineInputBorder(
                          borderSide: BorderSide(
                            color: Color(0x00000000),
                            width: 1,
                          ),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(4.0),
                            topRight: Radius.circular(4.0),
                          ),
                        ),
                      ),
                    ),
                  ),
                )
              ]),
            )
          ],
        ),
      ),
    );
  }
}

enum ExampleMenuOptions {
  fitBounds,
  getBounds,
  getCenter,
  getHeading,
  getTilt,
  getZoom,
  panBy,
  panTo,
  panToBounds,
  setCenter,
  setHeading,
  setTilt,
  setZoom,
}

class ExampleMenu extends StatelessWidget {
  const ExampleMenu({
    super.key,
    required this.webViewController,
  });

  final WoosmapController? webViewController;

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<ExampleMenuOptions>(
      key: const ValueKey<String>('ShowPopupMenu'),
      onSelected: (ExampleMenuOptions value) {
        switch (value) {
          case ExampleMenuOptions.fitBounds:
            _onFitBounds();
            break;
          case ExampleMenuOptions.getBounds:
            _onGetBounds().then((value) {
              if (value != null) {
                if (!context.mounted) return;
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text(jsonEncode(value.toJson()))),
                );
              }
            });
            break;
          case ExampleMenuOptions.getCenter:
            _onGetCenter().then((value) {
              if (value != null) {
                if (!context.mounted) return;
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text(jsonEncode(value.toJson()))),
                );
              }
            });
            break;
          case ExampleMenuOptions.getHeading:
            _onHeading().then((value) {
              if (!context.mounted) return;
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text(jsonEncode(value))),
              );
            });
            break;
          case ExampleMenuOptions.getTilt:
            _onTilt().then((value) {
              if (!context.mounted) return;
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text(jsonEncode(value))),
              );
            });
            break;
          case ExampleMenuOptions.getZoom:
            _onZoom().then((value) {
              if (!context.mounted) return;
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Zoom ${jsonEncode(value)}')),
              );
            });
            break;
          case ExampleMenuOptions.panBy:
            _onPanBy();
            break;
          case ExampleMenuOptions.panTo:
            _onPanTo();
            break;
          case ExampleMenuOptions.panToBounds:
            _onPanToBounds();
            break;
          case ExampleMenuOptions.setCenter:
            _onSetCenter();
            break;
          case ExampleMenuOptions.setHeading:
            _onSetHeading();
            break;
          case ExampleMenuOptions.setTilt:
            _onSetTilt();
            break;
          case ExampleMenuOptions.setZoom:
            _onSetZoom();
            break;
        }
      },
      itemBuilder: (BuildContext context) =>
          <PopupMenuItem<ExampleMenuOptions>>[
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.fitBounds,
          child: Text('fitBounds'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.getBounds,
          child: Text('getBounds'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.getCenter,
          child: Text('getCenter'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.getHeading,
          child: Text('getHeading'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.getTilt,
          child: Text('getTilt'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.getZoom,
          child: Text('getZoom'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.panBy,
          child: Text('panBy'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.panTo,
          child: Text('panTo'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.panToBounds,
          child: Text('panToBounds'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.setCenter,
          child: Text('setCenter'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.setHeading,
          child: Text('setHeading'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.setTilt,
          child: Text('setTilt'),
        ),
        const PopupMenuItem<ExampleMenuOptions>(
          value: ExampleMenuOptions.setZoom,
          child: Text('setZoom'),
        ),
      ],
    );
  }

  Future<void> _onFitBounds() async {
    await webViewController?.fitBounds(
      LatLngBounds.fromJson({
        "ne": {"lat": 48.844437932920535, "lng": 2.3743880269761393},
        "sw": {"lat": 48.854437932920535, "lng": 2.3843880269761393}
      }),
      WoosPadding.fromJson({"top": 2, "left": 2, "right": 3, "bottom": 3}),
    );
  }

  Future<LatLng?> _onGetCenter() async {
    return await webViewController?.getCenter();
  }

  Future<LatLngBounds?> _onGetBounds() async {
    return await webViewController?.getBounds(
      WoosPadding.fromJson({"top": 2, "left": 2, "right": 3, "bottom": 3}),
    );
  }

  Future<double> _onHeading() async {
    return await webViewController?.getHeading() ?? 0.0;
  }

  Future<double> _onTilt() async {
    return await webViewController?.getTilt() ?? 0.0;
  }

  Future<double> _onZoom() async {
    return await webViewController?.getZoom() ?? 0.0;
  }

  Future<void> _onPanBy() async {
    await webViewController?.panBy(20, 10);
  }

  Future<void> _onPanTo() async {
    await webViewController?.panTo(
      LatLng.fromJson({"lat": 48.844437932920535, "lng": 2.3743880269761393}),
      WoosPadding.fromJson({"top": 2, "left": 2, "right": 3, "bottom": 3}),
    );
  }

  Future<void> _onPanToBounds() async {
    await webViewController?.panToBounds(
      LatLngBounds.fromJson({
        "ne": {"lat": 48.844437932920535, "lng": 2.3743880269761393},
        "sw": {"lat": 48.854437932920535, "lng": 2.3843880269761393}
      }),
      WoosPadding.fromJson({"top": 2, "left": 2, "right": 3, "bottom": 3}),
    );
  }

  Future<void> _onSetCenter() async {
    await webViewController?.setCenter(
      LatLng.fromJson({"lat": 48.844437932920535, "lng": 2.3743880269761393}),
      WoosPadding.fromJson({"top": 2, "left": 2, "right": 3, "bottom": 3}),
    );
  }

  Future<void> _onSetHeading() async {
    await webViewController?.setHeading(20);
  }

  Future<void> _onSetTilt() async {
    await webViewController?.setTilt(5);
  }

  Future<void> _onSetZoom() async {
    await webViewController?.setZoom(20);
  }
}

此示例展示了如何初始化Woosmap地图、处理各种地图事件，并通过弹出菜单执行地图操作（如缩放、平移等）。希望这能帮助您更好地理解和使用woosmap_flutter插件。

更多关于Flutter地图与位置服务插件woosmap_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼

更多关于Flutter地图与位置服务插件woosmap_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter应用中使用woosmap_flutter插件来实现地图和位置服务的示例代码。woosmap_flutter是一个用于集成Woosmap地图服务的Flutter插件，它提供了丰富的地图功能和位置服务。

首先，确保你已经在pubspec.yaml文件中添加了woosmap_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  woosmap_flutter: ^最新版本号  # 请替换为最新的版本号

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

接下来，是如何在Flutter应用中使用woosmap_flutter的示例代码：

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

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

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

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

class _MapScreenState extends State<MapScreen> {
  late WoosmapController _woosmapController;

  @override
  void initState() {
    super.initState();
    // 初始化WoosmapController
    _woosmapController = WoosmapController(
      apiKey: '你的Woosmap API密钥',  // 请替换为你的Woosmap API密钥
    );

    // 设置地图中心点和缩放级别
    _woosmapController.mapController.initialCameraPosition = CameraPosition(
      target: LatLng(你的纬度, 你的经度),  // 请替换为你的初始位置
      zoom: 14.0,
    );

    // 监听地图移动事件（可选）
    _woosmapController.mapController.onCameraMoveStarted.listen((_) {
      print('地图开始移动');
    });

    _woosmapController.mapController.onCameraMove.listen((_) {
      print('地图正在移动');
    });

    _woosmapController.mapController.onCameraIdle.listen((_) {
      print('地图停止移动');
      // 在这里可以获取当前地图的中心点坐标
      final LatLng center = _woosmapController.mapController.cameraPosition.target;
      print('当前地图中心点：纬度=${center.latitude}, 经度=${center.longitude}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Woosmap Flutter Demo'),
      ),
      body: Stack(
        children: [
          WoosmapMap(
            controller: _woosmapController,
          ),
          // 可以在地图上添加标记等其他元素
          Positioned(
            bottom: 10,
            right: 10,
            child: FloatingActionButton(
              onPressed: () {
                // 显示当前位置（需要额外的位置服务插件来获取当前位置）
                // 这里只是一个示例，实际使用时需要请求位置权限并使用位置服务插件
                // 例如使用geolocator插件获取当前位置，然后更新地图中心点
                // _woosmapController.mapController.animateCamera(CameraUpdate.newLatLng(
                //   LatLng(当前纬度, 当前经度),
                // ));
              },
              tooltip: '显示当前位置',
              child: Icon(Icons.location_on),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    // 释放资源
    _woosmapController.dispose();
    super.dispose();
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个Woosmap地图。我们初始化了WoosmapController并设置了地图的初始中心点和缩放级别。我们还监听了地图的移动事件，以便在地图移动时执行一些操作（例如打印日志）。

请注意，这个示例代码没有包含获取当前位置的具体实现，因为获取当前位置通常需要使用额外的位置服务插件（如geolocator）。在实际应用中，你需要请求位置权限并使用这些插件来获取当前位置，然后更新地图的中心点。

此外，确保你已经替换了你的Woosmap API密钥、你的纬度和你的经度为实际的值。

这个示例只是一个起点，woosmap_flutter插件提供了许多其他功能，如添加标记、多边形、聚合等，你可以根据文档进一步探索和实现这些功能。