Flutter插件smmap_lv的使用方法

smmap_lv概述

本Flutter插件允许在Flutter小部件中嵌入交互式且可定制的矢量地图。对于Android和iOS的集成，我们使用了SmMap-lv-native库。对于Web端，则依赖于SmMap-lv-js库。此项目仅支持这些库所暴露API的一部分。

![screenshot.png]

运行示例应用

以下是运行示例应用的步骤：

1. 安装Flutter并验证安装是否成功，通过运行flutter doctor来检查。
2. 克隆仓库：git clone git@github.com:tobrun/flutter-SmMap-lv.git
3. 在示例应用中添加VTMap访问令牌（见下一节）。
4. 连接移动设备或启动模拟器、仿真器或Chrome浏览器。
5. 使用flutter devices命令找到设备ID。
6. 运行应用：cd flutter_VTMap/example && flutter packages get && flutter run -d {device_id}

添加VTMap访问令牌

该项目使用VTMap矢量瓦片，这需要一个VTMap账户和VTMap访问令牌。可以在VtMap账户页面获取免费访问令牌。

注意：即使您不使用VTMap矢量瓦片，而是从其他来源（如自托管瓦片）加载矢量瓦片，也需要指定一个非空字符串作为访问令牌。

推荐的方法是从VTMaps构造函数的accessToken参数中提供访问令牌，该方法自v0.8版本开始可用。请注意，应在整个应用程序中始终使用相同的令牌。

在v0.7及更早版本中，提供访问令牌的另一种方法可以在此维基文章中找到。

在您的项目中使用SDK

此项目可在pub.dev上找到。按照官方文档中的说明将包集成到Flutter应用程序中。对于平台特定的集成，请以示例文件夹下的Flutter应用程序为参考。

支持的功能

地图样式

地图样式可以通过设置MapOptions中的styleString来指定。支持以下格式：

1. 传递地图样式的URL。这可以是内置的地图样式之一，也可以是一个通过VTMapStyles定义的样式，或者是一个远程服务提供的样式，其URL以http(s)://开头。
2. 将样式作为本地资源传递。在assets目录下创建JSON文件，并在pubspec.yml中添加引用。设置样式字符串为该资产的相对路径，以便将其加载到地图中。
3. 传递地图样式的原始JSON。此功能仅在Android上受支持。

离线侧加载

通过“侧加载”所需的地图瓦片并将其包含在assets文件夹中，可以实现离线地图的支持。

1. 按照此处提供的指南创建您的瓦片包。
2. 将第一步生成的tiles.db文件放置在您的assets目录中，并在pubspec.yml文件中添加引用。

   assets:
     - assets/cache.db

1. 在应用程序启动时调用installOfflineMapTiles，以将瓦片复制到VTMap可以访问的位置。注意：此方法应在加载Map小部件之前调用，以避免文件复制时发生冲突。

try {
  await installOfflineMapTiles(join("assets", "cache.db"));
} catch (err) {
  print(err);
}

位置功能

Android

要在Android应用程序中启用位置功能：

需要在AndroidManifest.xml中声明ACCESS_COARSE_LOCATION或ACCESS_FINE_LOCATION权限，并从Android API级别23开始，在运行时请求权限。插件不会为您处理此操作。示例应用程序使用了flutter的location插件来实现此功能。

iOS

要在iOS应用程序中启用位置功能：

如果访问用户的地理位置，应在Info.plist中添加以下键，以解释为什么需要访问他们的位置数据：

<key>NSLocationWhenInUseUsageDescription</key>
<string>[Your explanation here]</string>

VTMap建议的解释为：“在地图上显示您的位置并帮助改进地图”。

文档

README文件目前包含了该项目的所有文档。如果您想了解更多关于Android和iOS的VTMap Maps SDK的信息，请访问VTMap.com/android-docs和VTMap.com/ios-sdk。

获取帮助

• 需要代码帮助？：查看Stack Overflow上的以前问题，或提出新问题。
• 有错误要报告？：打开新问题。如果可能，请包括完整的日志和显示问题的信息。
• 有功能请求？：打开新问题。告诉我们功能应该做什么以及为什么需要该功能。

贡献

我们欢迎对该存储库的贡献！如果您有兴趣帮助构建VTMap/Flutter集成，请阅读贡献指南，了解如何开始。

示例代码

以下是使用smmap_lv插件的基本示例代码：

import 'package:flutter/material.dart';
import 'package:smmap_lv/map_view.dart'; // 导入smmap_lv插件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapViewPage(), // 使用MapView小部件展示地图
    );
  }
}

class MapViewPage extends StatefulWidget {
  [@override](/user/override)
  _MapViewPageState createState() => _MapViewPageState();
}

class _MapViewPageState extends State<MapViewPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SmMap LV 示例'),
      ),
      body: SmMapLV( // 使用SmMapLV小部件
        accessToken: '您的VTMap访问令牌', // 替换为您的VTMap访问令牌
        initialCameraPosition: CameraPosition( // 设置初始相机位置
          target: LatLng(37.7749, -122.4194), // 旧金山坐标
          zoom: 10,
        ),
        onMapCreated: (controller) {
          // 地图创建完成后的回调
          print('地图已创建');
        },
      ),
    );
  }
}