Flutter跟踪与分析插件trackasia_gl的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter跟踪与分析插件trackasia_gl的使用

此Flutter插件允许在Flutter小部件中显示嵌入式交互式和可定制的矢量地图。

对于Android和iOS集成，我们使用的是trackasia-native。对于Web，我们依赖于trackasia-gl-js。本项目仅支持这些库所暴露API的一个子集。

本项目是从tobrun/flutter-mapbox-gl分叉出来的，用trackasia GL库替换了其使用的Mapbox GL库。

请注意，该项目是由社区驱动的，并不隶属于公司Trackasia。 但是，它确实使用了一些他们的优秀开源库/工具。感谢Mapbox为开源工作做出的所有贡献！

在你的项目中使用插件

当前，此项目尚未发布到pub.dev。 你可以在pubspec.yaml文件中像这样引用它：

dependencies:
    ...
    trackasia_gl:
      git:
        url: https://github.com/track-asia/trackasia-flutter-gl.git
        ref: main

这将获取主分支上的最新更改。你可以将main替换为最新的发布版本名称以获得更稳定的版本。

与flutter-mapbox-gl相比，只有以下API发生了变化：

  • TrackasiaMap --> TrackasiaMap
  • TrackasiaMapController --> TrackasiaMapController

文档

文档位于docs分支的doc/api文件夹中，并且在每次向主分支推送时都会自动更新。你可以在这里轻松预览文档/API参考。

访问https://github.com/track-asia/trackasia-gl-js 和 https://github.com/track-asia/trackasia-native 获取更多关于trackasia库的信息。

iOS

要使用此插件，你需要在Podfile中添加源存储库和两个额外的pod，如示例应用所示：

source 'https://cdn.cocoapods.org/'
source 'https://github.com/track-asia/trackasia-flutter-podspecs.git'

pod 'trackasia'
pod 'trackasiaAnnotationExtension'

Web

在web/index.html文件的<head>部分包含以下JavaScript和CSS文件：

<script src='https://unpkg.com/trackasia-gl@latest/dist/trackasia-gl.js'></script>
<link href='https://unpkg.com/trackasia-gl@latest/dist/trackasia-gl.css' rel='stylesheet' />

支持的API

功能 Android iOS Web
风格 ✅ ✅ ✅
相机 ✅ ✅ ✅
手势 ✅ ✅ ✅
用户位置 ✅ ✅ ✅
符号 ✅ ✅ ✅
圆 ✅ ✅ ✅
线 ✅ ✅ ✅
填充 ✅ ✅ ✅

地图样式

地图样式可以通过在MapOptions中设置styleString来提供。支持以下格式：

  1. 通过传递地图样式的URL。这应该是一个使用开始于’http(s)://'的URL远程提供的自定义地图样式。
  2. 通过传递本地资产中的样式。在assets目录中创建一个JSON文件，并在pubspec.yml中添加引用。设置样式字符串为此资产的相对路径，以便将其加载到地图中。
  3. 通过传递本地文件中的样式。在应用程序目录（例如ApplicationDocumentsDirectory）中创建一个JSON文件。设置样式字符串为此JSON文件的绝对路径。
  4. 通过传递地图样式的原始JSON。这仅在Android上受支持。

包含API密钥的瓦片源

如果您的瓦片源需要API密钥，建议直接指定包含API密钥的源URL。例如：

https://tiles.example.com/{z}/{x}/{y}.vector.pbf?api_key={your_key}

位置功能

Android

在android/app/src/main/AndroidManifest.xml应用程序清单中添加ACCESS_COARSE_LOCATION或ACCESS_FINE_LOCATION权限，以启用Android应用程序的位置功能：

<manifest ...
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

从Android API级别23开始，还需要在运行时请求权限。此插件不会为您处理此问题。示例应用程序使用flutter的location插件进行此操作。

iOS

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

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

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

一个可能的解释可以是：“显示地图上的位置”。

获取帮助

  • 需要帮助解决代码问题？：请查看此仓库的讨论，或者打开一个新的讨论。或者在Stack Overflow上查找先前的问题，或者提出新问题。
  • 需要报告错误？：请打开一个问题。如果可能，请包括完整的日志和显示问题的信息。
  • 需要提出功能请求？：请打开一个问题。告诉我们该功能应该做什么，以及你为什么想要这个功能。

在GitHub Codespaces中运行

当你在GitHub Codespaces中打开此项目时，可以使用命令flutter run -d web-server --web-hostname=0.0.0.0在web上运行示例应用。

Codespaces应自动处理必要的端口转发，以便你可以在本地设备或新标签页中查看正在运行的web应用。

注意： 用于设置Codespace的Docker镜像是来自CirrusCI的，设置了Git用户名和邮箱为默认值。如果你计划从Codespace提交，请正确设置这些信息。

解决常见问题

避免Android UnsatisfiedLinkError

在android\app\build.gradle中更新构建类型：

buildTypes {
    release {
        // 其他配置
        ndk {
            abiFilters 'armeabi-v7a','arm64-v8a','x86_64', 'x86'
        }
    }
}

更多关于Flutter跟踪与分析插件trackasia_gl的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter跟踪与分析插件trackasia_gl的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成和使用trackasia_gl插件来进行跟踪与分析的示例代码。请注意，trackasia_gl是一个假设的插件名称，因为在实际中可能不存在一个名为trackasia_gl的官方插件。但我会基于一般跟踪与分析插件的集成步骤，给出一个示例代码结构。

首先，确保在pubspec.yaml文件中添加依赖项（这里假设trackasia_gl是一个有效的Flutter插件）：

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

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

接下来，在你的Flutter应用中进行初始化和配置。以下是一个基本的示例，展示如何在应用中初始化跟踪插件并发送一些事件：

main.dart

import 'package:flutter/material.dart';
import 'package:trackasia_gl/trackasia_gl.dart';  // 假设这是插件的导入路径

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化跟踪插件
  TrackasiaGl.initialize(
    apiKey: 'YOUR_API_KEY',  // 替换为你的实际API密钥
    enableLogging: true,     // 是否启用日志记录
  );

  runApp(MyApp());
}

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _trackEvent() {
    // 发送一个自定义事件
    TrackasiaGl.trackEvent(
      eventName: 'button_clicked',
      properties: {
        'button_name': 'submit_button',
        'screen_name': 'home_screen',
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TrackasiaGL Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _trackEvent,
          child: Text('Track Event'),
        ),
      ),
    );
  }
}

注意事项

  1. API密钥：确保将YOUR_API_KEY替换为你从trackasia_gl服务获得的实际API密钥。
  2. 插件配置：根据trackasia_gl插件的文档，可能需要配置其他初始化参数。
  3. 事件属性：properties参数允许你附加额外的自定义数据到你的跟踪事件中，这可以帮助你在分析平台上获得更详细的用户行为数据。
  4. 错误处理：在实际应用中，你应该添加适当的错误处理逻辑，以处理插件初始化失败或事件发送失败的情况。

插件文档

请务必参考trackasia_gl插件的官方文档，因为实际的API和初始化步骤可能有所不同。如果trackasia_gl是一个假想的插件名称，那么你可能需要找到一个类似的、适合你的需求的跟踪与分析插件，并按照其文档进行集成。

希望这个示例代码能帮助你在Flutter项目中集成和使用跟踪与分析插件！

回到顶部