Flutter地图集成插件mapkit_js的使用

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

Flutter 地图集成插件 mapkit_js 的使用

mapkit_js

pub package

英文, 日文

这是一个允许你在网页中嵌入 Apple 地图的 Dart 实现。你可以查看 Apple 的页面以获取更详细的解释。

Apple 官方文档

开始使用

import 'dart:js_interop';
import 'package:mapkit_js/mapkit_js.dart' as mapkit;

void main() async {
  // 需要准备 TokenID。
  // [创建地图标识符和私钥](https://developer.apple.com/documentation/mapkitjs/creating_a_maps_identifier_and_a_private_key)
  const tokenID = String.fromEnvironment('TokenID');
  // 加载 MapKitJS 脚本
  await mapkit.loadMapKitJS(tokenID);
  // 初始化 MapKit JS
  mapkit.init(mapkit.MapKitInitOptions(
      authorizationCallback: (JSFunction done) {
    // done() 返回令牌
    done.callAsFunction(null, tokenID.toJS);
    // 等待库加载完成
    Future.doWhile(() async {
      if (mapkit.loadedLibraries.toDart.isEmpty) {
        await Future.delayed(Duration(milliseconds: 100));
        return true;
      }
      return false;
    }).whenComplete(() {
      // 创建地图
      final map = mapkit.Map('map'.toJS, null);
      map.addEventListener(
          'region-change-end',
          (JSAny e) {
            print(map.center);
          }.toJS,
          null);
      map.addEventListener(
          'single-tap',
          (JSAny e) {
            map.setCenterAnimated(mapkit.Coordinate(37.415, -122.048333), true);
          }.toJS,
          null);
    });
  }.toJS));
}

TokenID

要使用 MapKitJS，你需要生成一个 TokenID。

请参考以下链接获取 TokenID：

创建地图标识符和私钥

如果你在 build.yaml 中添加了 TokenID，你可以在 Dart 中使用 String.fromEnvironment 获取其值。

global_options:
  build_web_compilers|ddc:
    options:
      environment:
        TokenID: <YOUR_TOKEN>

const tokenID = String.fromEnvironment('TokenID');

构建

我还创建了一个工具来自动生成 API。执行以下命令将生成 mapkit_js_api.dart。

dart tool/main.dart

更多关于Flutter地图集成插件mapkit_js的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter地图集成插件mapkit_js的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中集成和使用mapkit_js插件的示例代码。mapkit_js是一个允许你在Flutter应用中集成和使用Apple MapKit JS的插件。请注意，由于mapkit_js是基于Web视图的，因此它主要用于iOS平台上的WebView集成。对于Android平台，你可能需要使用其他地图服务插件，比如google_maps_flutter。

首先，确保你已经在pubspec.yaml文件中添加了mapkit_js依赖：

dependencies:
  flutter:
    sdk: flutter
  mapkit_js: ^x.y.z  # 请替换为最新版本号

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

接下来，创建一个Flutter页面来展示MapKit JS地图。下面是一个简单的示例代码：

import 'package:flutter/material.dart';
import 'package:mapkit_js/mapkit_js.dart';
import 'dart:html' as html;

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

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

class MapKitJSPage extends StatefulWidget {
  @override
  _MapKitJSPageState createState() => _MapKitJSPageState();
}

class _MapKitJSPageState extends State<MapKitJSPage> {
  late MapKitJSController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MapKit JS Integration'),
      ),
      body: WebView(
        initialUrl: Uri.dataFromString(
          '''
          <!DOCTYPE html>
          <html>
          <head>
            <title>MapKit JS Example</title>
            <script src="https://maps.apple.com/js/api/v1/mapkit.js"></script>
            <style>
              #map {
                width: 100%;
                height: 100vh;
              }
            </style>
          </head>
          <body>
            <div id="map"></div>
            <script>
              function initMap() {
                mapkit.init({
                  apiKey: 'YOUR_API_KEY_HERE' // 请替换为你的Apple MapKit JS API Key
                });

                var map = new mapkit.Map('map');
                map.addTiles();
                map.showLocation({
                  latitude: 37.7749,
                  longitude: -122.4194
                });
              }
              window.onload = initMap;
            </script>
          </body>
          </html>
          ''',
          mimeType: 'text/html',
          encoding: html.Encoding.getByName('utf-8')
        ).toString(),
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = MapKitJSController(webViewController);
        },
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

class MapKitJSController {
  final WebViewController _webViewController;

  MapKitJSController(this._webViewController);

  void dispose() {
    // 在这里可以添加任何清理代码
  }

  // 你可以根据需要添加更多方法来与WebView交互
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个WebView，用于加载包含MapKit JS代码的HTML页面。你需要将YOUR_API_KEY_HERE替换为你从Apple开发者账户获取的MapKit JS API Key。

请注意，由于mapkit_js依赖于WebView，因此在Android上可能无法直接运行此代码，或者效果可能不如在iOS上理想。对于跨平台的地图解决方案，你可能需要考虑使用google_maps_flutter（针对Android和iOS）或其他地图服务插件。

此外，这个示例代码没有深入使用mapkit_js插件的高级功能，因为mapkit_js主要是一个桥接插件，允许你在Flutter应用中嵌入和使用MapKit JS的Web视图。如果你需要更复杂的交互，你可能需要直接在HTML/JavaScript代码中实现这些功能，并通过WebView的JavaScript接口与Flutter应用进行通信。

回到顶部