Flutter URL管理插件utm的使用

Flutter URL管理插件utm的使用

在本指南中，我们将展示如何使用 utm 插件来实现地理坐标（经纬度）与通用横轴墨卡托坐标系统（UTM）之间的双向转换。此插件基于 Python 的 UTM 库，并支持多种大地测量系统。

支持的大地测量系统

  • WGS84（默认）
  • GRS80
  • Bessel

UTM 坐标系统的详细说明可以参见 维基百科 页面。

使用方法

默认大地测量系统（WGS84）

import 'package:utm/utm.dart';

void main() {
  // 从经纬度创建 UTM 对象
  final utm = UTM.fromLatLon(lat: -30, lon: -150);
  print('zone: ${utm.zone}'); // 输出 UTM 分区
  print('N: ${utm.northing}'); // 输出北向坐标
  print('E: ${utm.easting}'); // 输出东向坐标
  print('lat: ${utm.lat}'); // 输出纬度
  print('lon: ${utm.lon}'); // 输出经度

  // 从 UTM 对象转换回经纬度
  final latlon = UTM.fromUtm(
    easting: utm.easting,
    northing: utm.northing,
    zoneNumber: utm.zoneNumber,
    zoneLetter: utm.zoneLetter,
  );
  print('lat: ${latlon.lat}'); // 输出纬度
  print('lon: ${latlon.lon}'); // 输出经度
}

指定特定的大地测量系统

import 'package:utm/utm.dart';

void main() {
  // 使用 Bessel 大地测量系统
  final utmBessel = UTM.fromLatLon(lat: -30, lon: -150, type: GeodeticSystemType.bessel);
  print('zone: ${utmBessel.zone}');
  print('N: ${utmBessel.northing}');
  print('E: ${utmBessel.easting}');
  print('lat: ${utmBessel.lat}');
  print('lon: ${utmBessel.lon}');

  // 使用 GRS80 大地测量系统
  final utmGrs80 = UTM.fromUtm(
    easting: utm.easting,
    northing: utm.northing,
    zoneNumber: utm.zoneNumber,
    zoneLetter: utm.zoneLetter,
    type: GeodeticSystemType.grs80,
  );
  print('lat: ${utmGrs80.lat}');
  print('lon: ${utmGrs80.lon}');
}

更多关于Flutter URL管理插件utm的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter URL管理插件utm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，utm 参数通常用于跟踪 URL 中的来源、媒介和其他营销信息。虽然 Flutter 本身没有专门处理 utm 参数的插件，但你可以使用 Uri 类来解析 URL 并提取 utm 参数。此外，url_launcher 插件可以帮助你打开 URL，而 flutter_webview_plugin 或 webview_flutter 可以帮助你在应用中嵌入 WebView。

以下是如何在 Flutter 中处理 utm 参数的示例：

1. 解析 URL 并提取 utm 参数

你可以使用 Dart 的 Uri 类来解析 URL 并提取 utm 参数。

import 'dart:core';

void parseUtmParameters(String url) {
  Uri uri = Uri.parse(url);
  
  String utmSource = uri.queryParameters['utm_source'];
  String utmMedium = uri.queryParameters['utm_medium'];
  String utmCampaign = uri.queryParameters['utm_campaign'];
  String utmTerm = uri.queryParameters['utm_term'];
  String utmContent = uri.queryParameters['utm_content'];
  
  print('utm_source: $utmSource');
  print('utm_medium: $utmMedium');
  print('utm_campaign: $utmCampaign');
  print('utm_term: $utmTerm');
  print('utm_content: $utmContent');
}

void main() {
  String url = 'https://example.com/?utm_source=google&utm_medium=cpc&utm_campaign=summer_sale';
  parseUtmParameters(url);
}

2. 使用 url_launcher 打开 URL

url_launcher 是一个常用的 Flutter 插件，用于在应用中打开 URL。

首先，在 pubspec.yaml 中添加依赖：

dependencies:
  url_launcher: ^6.0.20

然后，使用以下代码打开 URL：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void launchUrl(String url) async {
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('URL Launcher'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              String url = 'https://example.com/?utm_source=google&utm_medium=cpc&utm_campaign=summer_sale';
              launchUrl(url);
            },
            child: Text('Open URL'),
          ),
        ),
      ),
    );
  }
}

3. 使用 webview_flutter 嵌入 WebView

如果你想在应用中嵌入一个 WebView 并处理 utm 参数，可以使用 webview_flutter 插件。

首先，在 pubspec.yaml 中添加依赖：

dependencies:
  webview_flutter: ^4.0.0

然后，使用以下代码嵌入 WebView：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WebView Example'),
        ),
        body: WebView(
          initialUrl: 'https://example.com/?utm_source=google&utm_medium=cpc&utm_campaign=summer_sale',
          javascriptMode: JavascriptMode.unrestricted,
          onPageFinished: (String url) {
            // 在这里解析 URL 并提取 `utm` 参数
            Uri uri = Uri.parse(url);
            String utmSource = uri.queryParameters['utm_source'];
            print('utm_source: $utmSource');
          },
        ),
      ),
    );
  }
}
回到顶部