Flutter地图服务插件jmap_flutter的使用

Flutter 地图服务插件 jmap_flutter 的使用

简介

jmap_flutter 是一个为 Flutter 提供 JMap 小部件的插件。

使用

要使用此插件，在 pubspec.yaml 文件中添加 jmap_flutter 作为依赖项。

开始使用

现在可以在您的小部件树中添加一个 JMap 小部件。

可以通过 JMapController 控制地图视图，该控制器通过 JMap 的 onMapInitialized 回调传递。

安装

Android

在项目级 build.gradle 文件中添加以下行：

allprojects {
    repositories {
        google()
        mavenCentral()
        // 添加以下 Maven 仓库
        maven {
            url = uri("https://cxapp.jfrog.io/artifactory/android-cxapp/")
        }
    }
}

示例用法

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 jmap_flutter 插件。

class MapScreen extends StatefulWidget {
  final int venueID;
  final int floorId;

  MapScreen(this.venueID, this.floorId);

  [@override](/user/override)
  MapScreenState createState() => MapScreenState();
}

class MapScreenState extends State<MapScreen> {
  bool isLoading = false;
  bool componentAdded = false;
  JMap? jmap;
  JMapController? controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    setState(() {
      isLoading = true;
    });

    JMapConfig mapConfig = JMapConfig(
      "https://api.jibestream.com",
      "********", 
      "********", 
      000, 
      widget.venueID, 
      widget.floorId
    );

    jmap = JMap(
      mapConfig,
      onTapDetectOnElement: (JMapDestination destination) {
        String? name = destination.name;
        print("On Tap from example app on destination $name");
        controller?.highlightDestination(destination, "#FF0000");
      },
      onMapInitialized: (JMapError? error, JMapController? controller) {
        setState(() {
          isLoading = false;
        });
        if (error != null) {
          String message = error.message;
          print("JMapInitialization Error: $message");
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(error.message)),
          );
        } else {
          print("JMap Initialized successfully");
          this.controller = controller;
        }
      },
      onTapDetectOnComponent: (int id) {
        print("Component tapped with $id");
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('插件示例应用'),
        actions: [
          TextButton(
            onPressed: () {
              changeFloorAction();
            }, 
            child: const Text('更改楼层')
          )
        ],
      ),
      body: Stack(
        children: [
          IgnorePointer(
            ignoring: isLoading,
            child: Column(
              children: [
                Expanded(child: Center(child: jmap,)),
                Container(
                  height: 100,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      ElevatedButton(
                        onPressed: () => clearButtonAction(),
                        child: const Text('清除')
                      ),
                      ElevatedButton(
                        onPressed: () {
                          componentAdded ? controller?.removeImageComponent(55) : loadAndAddImageComponent(const Point(768, 1026));
                          setState(() {
                            componentAdded = !componentAdded;
                          });
                        },
                        child: Text(componentAdded ? "移除组件" : "添加组件")
                      ),
                    ],
                  )
                )
              ],
            ),
          ),
          if (isLoading) const Center(child: CircularProgressIndicator()),
        ],
      )
    );
  }

  void clearButtonAction() {
    controller?.resetMapStyle();
    controller?.resetAmenityStyle();
    controller?.resetPathTypeStyle();
    controller?.clearWayfindingPath();
  }

  void changeFloorAction() {
    controller?.changeFloor(0000);
  }

  void loadAndAddImageComponent(Point point) async {
    // 从资产加载图像字节
    ByteData byteData = await rootBundle.load('assets/artist.jpeg');
  
    // 将 ByteData 转换为 Uint8List
    Uint8List imageBytes = byteData.buffer.asUint8List();
  
    // 将图像字节转换为 base64 字符串
    String base64String = base64Encode(imageBytes);
  
    controller?.addImageComponent(55, base64String, const Size(30, 30), point, cornerRadius: 10);
  }
}