feat：调试web获取定位信息

example/.gitignore

@@ -32,7 +32,6 @@
 /build/
 
 # Web related
-lib/generated_plugin_registrant.dart
 
 # Symbolication related
 app.*.symbols

example/lib/main.dart

 import 'dart:async';
-import 'dart:io';
+import 'dart:html';
+import 'dart:ui' as ui;
 import 'package:flutter/material.dart';
 import 'package:amap_flutter_location/amap_flutter_location.dart';
 import 'package:amap_flutter_location/amap_location_option.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:permission_handler/permission_handler.dart';
 
 void main() {
@@ -21,9 +23,12 @@ class _MyAppState extends State<MyApp> {
 
   AMapFlutterLocation _locationPlugin = new AMapFlutterLocation();
 
+  String? _divId;
+
   @override
   void initState() {
     super.initState();
+
     /// 设置是否已经包含高德隐私政策并弹窗展示显示用户查看，如果未包含或者没有弹窗展示，高德定位SDK将不会工作
     ///
     /// 高德SDK合规使用方案请参考官网地址：https://lbs.amap.com/news/sdkhgsy
@@ -48,12 +53,33 @@ class _MyAppState extends State<MyApp> {
     /// 动态申请定位权限
     requestPermission();
 
+    /// 这里使用时间作为唯一标识
+     _divId = DateTime.now().toIso8601String();
+    DivElement _element;
+
+    /// 先创建div并注册
+    // ignore: undefined_prefixed_name
+    ui.platformViewRegistry.registerViewFactory(_divId ?? "", (int viewId) {
+      /// 地图需要的Div
+      _element = DivElement()
+        ..style.width = '100%'
+        ..style.height = '100%'
+        ..style.margin = '0';
+
+      return _element;
+    });
+
     ///设置Android和iOS的apiKey<br>
     ///key的申请请参考高德开放平台官网说明<br>
     ///Android: https://lbs.amap.com/api/android-location-sdk/guide/create-project/get-key
     ///iOS: https://lbs.amap.com/api/ios-location-sdk/guide/create-project/get-key
     /// ios key使用的是承运司机iOS
-    AMapFlutterLocation.setApiKey("1dbf56e2e8a4d0e4cdc2df9efd36bc71", "125a8a531a3a740654c9e75bbefa7beb");
+    SchedulerBinding.instance.addPostFrameCallback((_) {
+      AMapFlutterLocation.setApiKey(
+          "1dbf56e2e8a4d0e4cdc2df9efd36bc71",
+          "125a8a531a3a740654c9e75bbefa7beb",
+          "83f7b7835d1d9d6ab93444950c84c003");
+    });
 
     ///iOS 获取native精度类型
     // if (Platform.isIOS) {
@@ -61,7 +87,9 @@ class _MyAppState extends State<MyApp> {
     // }
 
     ///注册定位结果监听
-    _locationListener = _locationPlugin.onLocationChanged().listen((Map<String, Object> result) {
+    _locationListener = _locationPlugin
+        .onLocationChanged()
+        .listen((Map<String, Object> result) {
       setState(() {
         _locationResult = result;
       });
@@ -94,7 +122,8 @@ class _MyAppState extends State<MyApp> {
     ///逆地理信息的语言类型
     locationOption.geoLanguage = GeoLanguage.DEFAULT;
 
-    locationOption.desiredLocationAccuracyAuthorizationMode = AMapLocationAccuracyAuthorizationMode.ReduceAccuracy;
+    locationOption.desiredLocationAccuracyAuthorizationMode =
+        AMapLocationAccuracyAuthorizationMode.ReduceAccuracy;
 
     locationOption.fullAccuracyPurposeKey = "AMapLocationScene";
 
@@ -211,10 +240,13 @@ class _MyAppState extends State<MyApp> {
 
   ///获取iOS native的accuracyAuthorization类型
   void requestAccuracyAuthorization() async {
-    AMapAccuracyAuthorization currentAccuracyAuthorization = await _locationPlugin.getSystemAccuracyAuthorization();
-    if (currentAccuracyAuthorization == AMapAccuracyAuthorization.AMapAccuracyAuthorizationFullAccuracy) {
+    AMapAccuracyAuthorization currentAccuracyAuthorization =
+        await _locationPlugin.getSystemAccuracyAuthorization();
+    if (currentAccuracyAuthorization ==
+        AMapAccuracyAuthorization.AMapAccuracyAuthorizationFullAccuracy) {
       print("精确定位类型");
-    } else if (currentAccuracyAuthorization == AMapAccuracyAuthorization.AMapAccuracyAuthorizationReducedAccuracy) {
+    } else if (currentAccuracyAuthorization ==
+        AMapAccuracyAuthorization.AMapAccuracyAuthorizationReducedAccuracy) {
       print("模糊定位类型");
     } else {
       print("未知定位类型");

example/web/index.html

@@ -38,6 +38,7 @@
   </script>
   <!-- This script adds the flutter initialization JS code -->
   <script src="flutter.js" defer></script>
+  <script src="https://webapi.amap.com/loader.js"></script>
 </head>
 <body>
   <script>

lib/amap_flutter_location.dart

@@ -42,8 +42,8 @@ class AMapFlutterLocation {
   /// iOS端: https://lbs.amap.com/api/ios-location-sdk/guide/create-project/get-key<br>
   /// [androidKey] Android平台的key<br>
   /// [iosKey] ios平台的key<br>
-  static void setApiKey(String androidKey, String iosKey) {
-    AmapLocationPluginPlatform.instance.setApiKey(androidKey, iosKey);
+  static void setApiKey(String androidKey, String iosKey, String webKey) {
+    AmapLocationPluginPlatform.instance.setApiKey(androidKey, iosKey, webKey);
   }
 
   /// 设置定位参数

lib/amap_location_plugin_method_channel.dart

@@ -72,7 +72,7 @@ class AmapLocationPluginMethodChannel extends AmapLocationPluginPlatform {
   ///iOS端: https://lbs.amap.com/api/ios-location-sdk/guide/create-project/get-key<br>
   ///[androidKey] Android平台的key<br>
   ///[iosKey] ios平台的key<br>
-  void setApiKey(String androidKey, String iosKey) {
+  void setApiKey(String androidKey, String iosKey, String webKey) {
     _methodChannel
         .invokeMethod('setApiKey', {'android': androidKey, 'ios': iosKey});
   }

lib/amap_location_plugin_platform_interface.dart

@@ -52,7 +52,7 @@ abstract class AmapLocationPluginPlatform extends PlatformInterface {
   ///iOS端: https://lbs.amap.com/api/ios-location-sdk/guide/create-project/get-key<br>
   ///[androidKey] Android平台的key<br>
   ///[iosKey] ios平台的key<br>
-  void setApiKey(String androidKey, String iosKey) {
+  void setApiKey(String androidKey, String iosKey, String webKey) {
     throw UnimplementedError('setApiKey() has not been implemented.');
   }
 

lib/amap_location_plugin_web.dart

@@ -2,17 +2,93 @@
 // of your plugin as a separate package, instead of inlining it in the same
 // package as the core of your plugin.
 // ignore: avoid_web_libraries_in_flutter
-import 'dart:html' as html show window;
+
+import 'dart:convert';
+import 'dart:ui';
 
 import 'package:amap_flutter_location/amap_location_plugin_platform_interface.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_web_plugins/flutter_web_plugins.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+import 'package:js/js_util.dart';
+
+import 'amap_location_option.dart';
+import 'web/amap.dart';
+import 'web/loader.dart';
 
 /// A web implementation of the TestWebPluginPlatform of the TestWebPlugin plugin.
 class AmapLocationPluginWeb extends AmapLocationPluginPlatform {
   /// Constructs a AmapLocationPluginWeb
   AmapLocationPluginWeb();
 
+  late AMap _aMap;
+
   static void registerWith(Registrar registrar) {
     AmapLocationPluginPlatform.instance = AmapLocationPluginWeb();
   }
+
+  @override
+  void initKey() {}
+
+  @override
+  void updatePrivacyShow(bool hasContains, bool hasShow) {}
+
+  @override
+  void updatePrivacyAgree(bool hasAgree) {}
+
+  @override
+  void setApiKey(String androidKey, String iosKey, String webKey) {
+    var promise = load(LoaderOptions(
+      key: webKey,
+      version: '1.4.15',
+      plugins: ['AMap.Geolocation'],
+    ));
+
+    promiseToFuture(promise).then((value) {
+      print('初始化成功');
+
+      MapOptions _mapOptions = MapOptions(
+        zoom: 10,
+      );
+      _aMap = AMap('container', _mapOptions);
+    }, onError: (e) {
+      print('初始化错误：$e');
+    });
+  }
+
+  @override
+  Stream<Map<String, Object>> onLocationChanged() {
+    return Stream.value({});
+  }
+
+
+  @override
+  void setLocationOption(AMapLocationOption locationOption) {
+
+  }
+
+  @override
+  void startLocation() {
+    _aMap.plugin(['AMap.Geolocation'], allowInterop(() {
+      GeolocationOptions _geolocationOptions = GeolocationOptions(
+        enableHighAccuracy: false,
+        timeout: 10000,
+        offset: [10, 20],
+        zoomToAccuracy: true,
+        position: "RB",
+      );
+      var geolocation = Geolocation(_geolocationOptions);
+      geolocation.getCurrentPosition(allowInterop((status, result) {
+        Fluttertoast.showToast(
+            msg: "${status}  ${result.message}",
+            toastLength: Toast.LENGTH_LONG,
+            gravity: ToastGravity.CENTER,
+            // timeInSecForIos: 1,
+            backgroundColor: const Color(0xB3000000),
+            textColor: Colors.white,
+            fontSize: 17.0);
+        print("=====11111 ${status}  ${result.message}");
+      }));
+    }));
+  }
 }

lib/web/amap.dart

+@JS('AMap')
+library amap;
+
+import 'package:js/js.dart';
+import 'dart:html' as html show window;
+
+// 这里`new Map(id)` 调用js的`new AMap.Map(id)`
+@JS('Map')
+class AMap {
+  external AMap(dynamic /*String|HTMLDivElement*/ div, MapOptions opts);
+
+  /// 加载插件
+  external plugin(dynamic /*String|List*/ name, void Function() callback);
+}
+
+@JS()
+@anonymous
+class MapOptions {
+  external LngLat get center;
+
+  external set center(LngLat v);
+
+  external factory MapOptions({
+    LngLat center,
+    num zoom,
+    String /*‘2D’|‘3D’*/ viewMode,
+  });
+}
+
+@JS()
+class LngLat {
+  external num getLng();
+
+  external num getLat();
+
+  external LngLat(num lng, num lat);
+}
+
+/// 定位
+@JS()
+class Geolocation {
+  external Geolocation(GeolocationOptions opts);
+
+  external getCurrentPosition(
+      void Function(String status, GeolocationResult result) callback);
+}
+
+@JS()
+@anonymous
+class GeolocationOptions {
+  external factory GeolocationOptions({
+    bool enableHighAccuracy,
+    num timeout,
+    List<int> offset,
+    bool zoomToAccuracy,
+    String position,
+  });
+}
+
+@JS()
+@anonymous
+class GeolocationResult {
+  external LngLat get position;
+
+  external String get message;
+}

lib/web/loader.dart

+@JS('AMapLoader')
+library loader;
+
+import 'package:js/js.dart';
+
+/// 高德地图 Loader js
+external load(LoaderOptions options);
+
+@JS()
+@anonymous
+class LoaderOptions {
+
+  external factory LoaderOptions({
+    ///您申请的key值
+    String key,
+    /// JSAPI 版本号
+    String version,
+    //同步加载的插件列表
+    List<String> plugins,
+  });
+}

pubspec.yaml

@@ -13,6 +13,9 @@ dependencies:
   flutter_web_plugins:
     sdk: flutter
   plugin_platform_interface: ^2.0.2
+  js: ^0.7.1
+  # toast https://pub.dev/packages/fluttertoast
+  fluttertoast: ^8.2.1
 
 dev_dependencies:
   flutter_test: