Flutter插件dgis_flutter的使用_dgis_flutter是一个由 2GIS 提供的插件，用于在 Flutter 应用中集成地图功能

Flutter插件dgis_flutter的使用_dgis_flutter是一个由 2GIS 提供的插件，用于在 Flutter 应用中集成地图功能

dgis_flutter介绍

dgis_flutter 是一个由 2GIS 提供的插件，用于在 Flutter 应用中集成地图功能。

Flutter插件dgis_flutter开始使用

要运行地图功能，你需要以下两个密钥：

• mapKey：用于 MapGL JS API 和 Android NativeSDK 的密钥。
• 其他密钥：例如用于 truck-directions 的密钥。

所有与地图相关的操作都是通过 GisMapController 控制器来完成的。该控制器目前还没有绑定到具体的地图实例，并且可以在任何时候创建。它的主要作用是向原生 SDK 发送消息。

示例代码

import 'dart:developer';
import 'dart:typed_data';
import 'dart:ui';
import 'package:dgis_flutter/dgis_flutter.dart';
import 'package:dgis_flutter_example/assets_constant.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

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

class GisScreen extends StatefulWidget {
  const GisScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State<GisScreen> createState() => _GisScreenState();
}

class _GisScreenState extends State<GisScreen> {
  final GisMapController controller = GisMapController();

  late final Future<List<GisMapMarker>> icons;
  List<GisMapMarker> list = [];

  [@override](/user/override)
  void initState() {
    icons = Future.wait([getPngFromAsset(context, AssetPath.iconsPointGrey, 60)])
        .then((value) => [
              GisMapMarker(
                icon: value[0],
                latitude: 52.29778,
                longitude: 104.29639,
                zIndex: 0,
                id: "123456",
              )
            ]);
    super.initState();
  }

  Future<Uint8List> getPngFromAsset(
    BuildContext context,
    String path,
    int width,
  ) async {
    ByteData data = await DefaultAssetBundle.of(context).load(path);
    Codec codec = await instantiateImageCodec(
      data.buffer.asUint8List(),
      targetWidth: width,
    );
    FrameInfo fi = await codec.getNextFrame();
    return (await fi.image.toByteData(format: ImageByteFormat.png))!.buffer.asUint8List();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ButtonMapWidget(
          controller: controller,
          child: FutureBuilder<List<GisMapMarker>>(
            future: icons,
            builder: (context, snapshot) {
              if (!snapshot.hasData) return const SizedBox();
              list = snapshot.data!;
              return GisMap(
                directoryKey: 'rubyqf9316',
                mapKey: 'b7272230-6bc3-47e9-b24b-0eba73b12fe1',
                useHybridComposition: true,
                controller: controller,
                onTapMarker: (marker) {
                  // 忽略：打印标记ID
                  print(marker.id);
                },
                startCameraPosition: const GisCameraPosition(
                  latitude: 52.29778,
                  longitude: 104.29639,
                  bearing: 85.0,
                  tilt: 25.0,
                  zoom: 14.0,
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

class ButtonMapWidget extends StatelessWidget {
  final Widget child;
  final GisMapController controller;

  const ButtonMapWidget({Key? key, required this.child, required this.controller}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Stack(
      children: [
        child,
        Align(
          alignment: Alignment.bottomCenter,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              FloatingActionButton(
                child: const Icon(Icons.gps_fixed),
                onPressed: () async {
                  final status = await controller.setCameraPosition(latitude: 55.752425, longitude: 37.613983);
                  log(status);
                },
              ),
              FloatingActionButton(
                child: const Icon(Icons.zoom_in_outlined),
                onPressed: () async {
                  final status = await controller.increaseZoom(duration: 200);
                  log(status);
                },
              ),
              FloatingActionButton(
                child: const Icon(Icons.zoom_out_outlined),
                onPressed: () async {
                  final status = await controller.reduceZoom(duration: 200);
                  log(status);
                },
              ),
              FloatingActionButton(
                child: const Icon(Icons.add),
                onPressed: () async {
                  final status = await controller.setRoute(RoutePosition(
                      finishLatitude: 55.752425,
                      finishLongitude: 37.613983,
                      startLatitude: 55.759909,
                      startLongitude: 37.618806));
                  log(status);
                },
              ),
              FloatingActionButton(
                child: const Icon(Icons.remove),
                onPressed: () async {
                  final status = await controller.removeRoute();
                  log(status);
                },
              ),
            ],
          ),
        ),
      ],
    );
  }
}