Flutter中国地图展示插件mapofchina的使用

本文将介绍如何在Flutter项目中使用mapofchina插件来展示中国地图，并实现省份颜色设置、点击事件响应等功能。

功能特点

该插件支持绘制中国地图，并提供了以下功能：

• 支持设置省份的颜色。
• 可以响应点击事件并显示提示信息。
• 支持地图的缩放和交互。

使用步骤

1. 添加依赖

在pubspec.yaml文件中添加mapofchina插件的依赖：

dependencies:
  flutter:
    sdk: flutter

  mapofchina: ^0.0.4  

然后执行以下命令安装依赖：

flutter pub get

2. 导入相关包

在需要使用地图的文件中导入以下包：

import 'package:mapofchina/map/china_map.dart';
import 'package:mapofchina/map/data.dart';

3. 创建地图组件

创建一个简单的Flutter页面，展示中国地图。以下是完整的代码示例：

import 'package:flutter/material.dart';
import 'package:mapofchina/map/china_map.dart';
import 'package:mapofchina/map/data.dart';

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

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

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

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

  [@override](/user/override)
  State<HomeWidget> createState() => _HomeWidgetState();
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("中国地图"),
      ),
      body: Center(
        child: MapWidget(
          // 默认的提示语
          defaultToast: "北京 棒棒的",
          // 自定义省份信息，或使用 helper 工具生成
          cityItems: generatedCityItemsHelper((cityName) => CityItem(
                cityName: cityName,
                cityColor: _randomColor(), // 随机生成颜色
                isSelected: cityName == "山西" ? true : false, // 设置默认选中的省份
              )),
          // 省份被点击时的回调
          clickCallback: (cityName) {
            return "$cityName baby"; // 更新提示语
          },
          selectedStorkeColor: const Color(0xFF8BFDF0), // 选中省份的边框颜色
          background: const Color(0xFFF2F2F2), // 地图背景颜色
        ),
      ),
    );
  }

  /// 随机生成颜色
  Color _randomColor() {
    var index = Random().nextInt(3); // 随机生成 0, 1, 2
    if (index == 0) return Colors.green; // 浅色
    if (index == 1) return Colors.orange; // 中等色
    if (index == 2) return Colors.red; // 深色
    return Colors.grey; // 默认返回灰色
  }
}