Flutter地图渲染插件mapir_raster的使用

特性

TODO: 列出您的包可以做什么。可能包括图片、GIF或视频。

开始使用

TODO: 列出先决条件并提供或指向有关如何开始使用该包的信息。

使用

TODO: 包含对用户有用的简短示例。将较长示例添加到/example文件夹。

const like = 'sample';

额外信息

TODO: 告诉用户更多关于您的包的信息：在哪里可以找到更多信息，如何为您的包做出贡献，如何提交问题，以及他们可以从包作者那里期望得到什么响应等。

示例代码

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:mapir_raster_sdk/mapir_raster.dart';
import 'package:latlong2/latlong.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: MapirMap(
          // 设置API密钥
          apiKey: 'YOUR_API_KEY',
          // 地图选项
          options: MapOptions(
            // 设置地图中心点
            center: LatLng(35.7324556, 51.4229012),
            // 设置初始缩放级别
            zoom: 16.0,
          ),
          // 添加地图图层
          layers: [
            // 添加标记层
            MarkerLayerOptions(
              markers: [
                // 创建一个标记
                Marker(
                  // 设置标记宽度
                  width: 80.0,
                  // 设置标记高度
                  height: 80.0,
                  // 设置标记的位置
                  point: LatLng(35.7324556, 51.4229012),
                  // 定义标记的构建器
                  builder: (ctx) => const FlutterLogo(),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，该应用使用了mapir_raster插件来显示地图，并在指定位置添加了一个标记。以下是关键步骤的详细解释：

1. 导入必要的库：

   import 'package:flutter/material.dart';
   import 'package:flutter_map/flutter_map.dart';
   import 'package:mapir_raster_sdk/mapir_raster.dart';
   import 'package:latlong2/latlong.dart';
   

2. 设置应用入口：

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

3. 创建应用主体：

   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           body: MapirMap(
             apiKey: 'YOUR_API_KEY',
             options: MapOptions(
               center: LatLng(35.7324556, 51.4229012),
               zoom: 16.0,
             ),
             layers: [
               MarkerLayerOptions(
                 markers: [
                   Marker(
                     width: 80.0,
                     height: 80.0,
                     point: LatLng(35.7324556, 51.4229012),
                     builder: (ctx) => const FlutterLogo(),
                   ),
                 ],
               ),
             ],
           ),
         ),
       );
     }
   }