Flutter地图展示插件dgis_map_kit的使用

Flutter地图展示插件dgis_map_kit的使用

关于项目

这个Flutter 2gis 地图插件允许你在你的Flutter应用中添加一个eGIS地图，并且它的一个重要特性是能够在各种设备上工作，提供跨平台的通用性和易用性。这使得你的映射功能在各种设备上更加方便，对开发者和用户来说也更友好。

安装

通过运行以下命令来获取插件：

$ flutter pub add dgis_map_kit

基本地图使用

以下是基本地图使用的示例代码：

import 'package:dgis_map_kit/dgis_map_kit.dart';

// 简单的2Gis地图实例化

return DGisMap(
  token: "505d338f-975b-49e0-b4df-04c17dfa0ac3",
  initialCameraPosition: CameraPosition(
    position: Position(
      lat: 51.169392,
      long: 71.449074,
    ),
    zoom: 12.0,
  ),
  // ...
),

使用地图事件

以下是使用地图事件的示例代码：

import 'dart:developer' as log;

// 简单的地图事件使用

return DGisMap(
  // ...
  onUserLocationChanged: (position) => log.log(
    "User location changed: ${position.lat} ${position.long}",
  ),
  markerOnTap: (marker, layerId) => log.log(
    "Marker on tapped event: ${marker.position.lat} ${marker.position.long}",
  ),
  // ...
),

在地图上上传标记

以下是上传标记到地图上的示例代码：

late MapController controller;
return DGisMap(
  // ...
  mapOnCreated: (controller) => this.controller = controller,
  mapOnReady: () => controller.addMarkers([ 
    // 上传标记列表到地图。
    Marker(
      icon: "assets/map_pin.png",
      position: Position(
        lat: 51.132905927930146,
        long: 71.42752647399904,
      ),
    ),
    Marker(
      icon: "assets/map_pin.png",
      position: Position(
        lat: 51.13601624568085,
        long: 71.43458604812623,
      ),
    ),
  ]),
  // ...
),

添加标记聚类层

以下是添加标记聚类层的示例代码：

return DGisMap(
  // ...
  layers: [
    // 声明带有聚类的地图层
    MapLayer.withClustering(
      builder: (markers) => MapClusterer(
        icon: "assets/map_cluster_pin.png",
        iconOptions: MapIconOptions(
          text: markers.length.toString(),
          textStyle: const MapIconTextStyle(
            fontSize: 13.0,
            color: Colors.blue,
            strokeColor: Colors.blue,
            textPlacement: MapIconTextPlacement.TOP_CENTER,
            textOffset: -20.0,
          ),
        ),
      ),
      maxZoom: 20.0,
      minDistance: 100.0,
    ),
  ],
  // ...
),

相机移动

以下是相机移动的示例代码：

late MapController controller;
return DGisMap(
  // ...
  mapOnCreated: (controller) => this.controller = controller,
  // 简单的相机移动到点击的标记上：
  markerOnTap: (marker) {
    controller.moveCamera(
      controller.currentCameraPosition.copyWith(
        position: marker.position,
      ),
      duration: const Duration(milliseconds: 300),
      animationType: CameraAnimationType.DEFAULT,
    );
  },
  // ...
),

更多关于Flutter地图展示插件dgis_map_kit的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地图展示插件dgis_map_kit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用dgis_map_kit插件来展示地图的示例代码。请注意，由于dgis_map_kit是一个假定的插件名称（因为没有一个广泛知名的名为dgis_map_kit的Flutter地图插件），以下代码将基于一个假设的API结构。实际使用时，你需要参考该插件的官方文档和API参考。

首先，确保你已经在pubspec.yaml文件中添加了dgis_map_kit依赖项（注意：这里的依赖项名称是假设的，你需要替换为实际的插件名称）：

dependencies:
  flutter:
    sdk: flutter
  dgis_map_kit: ^x.y.z  # 替换为实际版本号

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

接下来，在你的Flutter应用中，你可以按照以下方式使用dgis_map_kit来展示地图：

import 'package:flutter/material.dart';
import 'package:dgis_map_kit/dgis_map_kit.dart'; // 假设的导入路径

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

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

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

class _MapScreenState extends State<MapScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Demo'),
      ),
      body: DGisMap(
        // 假设的初始化参数，你需要根据dgis_map_kit的API文档进行调整
        apiKey: 'YOUR_API_KEY', // 如果需要API密钥的话
        center: LatLng(37.7749, -122.4194), // 旧金山的坐标
        zoom: 14.0,
        onMapCreated: (DGisMapController controller) {
          // 地图创建完成后的回调，可以用来添加标记、多边形等
          print('Map created!');
          // 示例：添加一个标记
          controller.addMarker(
            MarkerOptions(
              position: LatLng(37.7749, -122.4194),
              infoWindow: InfoWindow(title: 'San Francisco', snippet: 'A beautiful city!'),
            ),
          );
        },
      ),
    );
  }
}

// 假设的LatLng和MarkerOptions类，你需要根据dgis_map_kit的实际API进行调整
class LatLng {
  final double latitude;
  final double longitude;

  LatLng(this.latitude, this.longitude);
}

class MarkerOptions {
  final LatLng position;
  final InfoWindow infoWindow;

  MarkerOptions({required this.position, required this.infoWindow});
}

class InfoWindow {
  final String title;
  final String snippet;

  InfoWindow({required this.title, required this.snippet});
}

注意：

  1. DGisMap, LatLng, MarkerOptions, 和 InfoWindow 是假设的类名和方法名。你需要根据dgis_map_kit（或你实际使用的地图插件）的文档进行调整。
  2. apiKey 参数是可选的，取决于你使用的地图服务是否需要API密钥。
  3. onMapCreated 回调用于在地图创建完成后执行一些操作，比如添加标记。

由于dgis_map_kit是一个假设的插件名称，因此上述代码不能直接运行。你需要根据实际使用的地图插件的文档进行相应的调整。如果你使用的是如flutter_map、google_maps_flutter等实际存在的插件，请参考它们的官方文档和示例代码。

回到顶部