feat：①重构地图插件（修改各端方式实现）②兼容各端实现

lib/amap_flutter_map_web.dart

+import 'dart:convert';
+import 'dart:html';
+import 'dart:js_util';
+import 'dart:ui_web';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_web_plugins/flutter_web_plugins.dart';
+
+import 'src/core/amap_flutter_platform.dart';
+import 'src/core/map_event.dart';
+import 'src/web/amap.dart';
+import 'src/web/amap_loader.dart';
+import 'src/web/utils.dart';
+
+/**
+ * web地图
+ */
+class AmapFlutterMapWeb extends AMapFlutterPlatform {
+  AmapFlutterMapWeb();
+
+  static void registerWith(Registrar registrar) {
+    AMapFlutterPlatform.instance = AmapFlutterMapWeb();
+  }
+
+  @override
+  Widget buildView(
+      Map<String, dynamic> creationParams,
+      Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers,
+      PlatformViewCreatedCallback onPlatformViewCreated) {
+    late DivElement _element;
+
+    /// 这里使用时间作为唯一标识
+    String _divId = DateTime.now().toIso8601String();
+
+    /// 先创建div并注册
+    platformViewRegistry.registerViewFactory(_divId, (int viewId) {
+      /// 地图需要的Div
+      _element = DivElement()
+        ..style.width = '100%'
+        ..style.height = '100%'
+        ..style.margin = '0';
+
+      return _element;
+    });
+    SchedulerBinding.instance.addPostFrameCallback((_) {
+      /// 创建地图
+      var promise = load(LoaderOptions(
+        key: 'f759e608583c169bb23d7817ed05583d',
+        version: '2.0',
+        plugins: ['AMap.Scale'],
+      ));
+
+      promiseToFuture(promise).then((value) {
+        consoleLog('初始化成功：value = ${stringify(value)}');
+        MapOptions _mapOptions = MapOptions(
+          zoom: 13,
+        );
+        AMap aMap = AMap(_element, _mapOptions);
+      }, onError: (e) {
+        print('初始化错误：$e');
+      });
+    });
+
+    return HtmlElementView(
+      viewType: _divId,
+      onPlatformViewCreated: onPlatformViewCreated,
+    );
+  }
+}

lib/src/amap_controller.dart

 part of amap_flutter_map;
 
-final MethodChannelAMapFlutterMap _methodChannel =
-    AMapFlutterPlatform.instance as MethodChannelAMapFlutterMap;
+final AMapFlutterPlatform _methodChannel = AMapFlutterPlatform.instance;
 
 /// 地图通信中心
 class AMapController {
@@ -155,8 +154,7 @@ class AMapController {
     return _methodChannel.containsPoint(point, id, mapId: mapId);
   }
 
-  //地图可视区域
-
+  /// 地图可视区域
   Future<dynamic> getVisibleRegion() {
     return _methodChannel.getVisibleRegion(mapId: mapId);
   }

lib/src/core/amap_flutter_platform.dart

+import 'package:amap_flutter_base/amap_flutter_base.dart';
 import 'package:amap_flutter_map/src/core/method_channel_amap_flutter_map.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
@@ -5,9 +6,13 @@ import 'package:flutter/gestures.dart';
 import 'package:flutter/services.dart';
 import 'package:plugin_platform_interface/plugin_platform_interface.dart';
 
+import '../types/types.dart';
+import 'map_event.dart';
+
 /// “amap_flutter_map”平台特定实现必须扩展的接口
 abstract class AMapFlutterPlatform extends PlatformInterface {
   static final Object _token = Object();
+
   AMapFlutterPlatform() : super(token: _token);
   static AMapFlutterPlatform _instance = MethodChannelAMapFlutterMap();
 
@@ -38,4 +43,172 @@ abstract class AMapFlutterPlatform extends PlatformInterface {
       PlatformViewCreatedCallback onPlatformViewCreated) {
     throw UnimplementedError('buildView() has not been implemented.');
   }
+
+  /// 定位回调
+  Stream<LocationChangedEvent> onLocationChanged({required int mapId}) {
+    throw UnimplementedError('onLocationChanged() has not been implemented.');
+  }
+
+  /// Camera 移动回调
+  Stream<CameraPositionMoveEvent> onCameraMove({required int mapId}) {
+    throw UnimplementedError('onCameraMove() has not been implemented.');
+  }
+
+  /// Camera 移动结束回调
+  Stream<CameraPositionMoveEndEvent> onCameraMoveEnd({required int mapId}) {
+    throw UnimplementedError('onCameraMoveEnd() has not been implemented.');
+  }
+
+  ///Camera 搜索POI回调
+  Stream<MapSearchPOIEvent> mapSearchPOI({required int mapId}) {
+    throw UnimplementedError('mapSearchPOI() has not been implemented.');
+  }
+
+  ///Camera 搜索inputtips回调
+  Stream<MapSearchInputTipsEvent> mapSearchInputTips({required int mapId}) {
+    throw UnimplementedError('mapSearchInputTips() has not been implemented.');
+  }
+
+  ///Camera 搜索regeocode回调
+  Stream<MapSearchRegeocodeEvent> mapSearchRegeocode({required int mapId}) {
+    throw UnimplementedError('mapSearchRegeocode() has not been implemented.');
+  }
+
+  /// 地图点击回调
+  Stream<MapTapEvent> onMapTap({required int mapId}) {
+    throw UnimplementedError('onMapTap() has not been implemented.');
+  }
+
+  /// 地图长按回调
+  Stream<MapLongPressEvent> onMapLongPress({required int mapId}) {
+    throw UnimplementedError('onMapLongPress() has not been implemented.');
+  }
+
+  /// poi点击回调
+  Stream<MapPoiTouchEvent> onPoiTouched({required int mapId}) {
+    throw UnimplementedError('onPoiTouched() has not been implemented.');
+  }
+
+  /// marker点击回调
+  Stream<MarkerTapEvent> onMarkerTap({required int mapId}) {
+    throw UnimplementedError('onMarkerTap() has not been implemented.');
+  }
+
+  /// marker拖拽回调
+  Stream<MarkerDragEndEvent> onMarkerDragEnd({required int mapId}) {
+    throw UnimplementedError('onMarkerDragEnd() has not been implemented.');
+  }
+
+  /// polyline点击回调
+  Stream<PolylineTapEvent> onPolylineTap({required int mapId}) {
+    throw UnimplementedError('onPolylineTap() has not been implemented.');
+  }
+
+  /// 更新地图参数
+  Future<void> updateMapOptions(
+    Map<String, dynamic> newOptions, {
+    required int mapId,
+  }) {
+    throw UnimplementedError('updateMapOptions() has not been implemented.');
+  }
+
+  /// 更新Marker的数据
+  Future<void> updateMarkers(MarkerUpdates markerUpdates,
+      {required int mapId}) {
+    throw UnimplementedError('updateMarkers() has not been implemented.');
+  }
+
+  /// 更新polyline的数据
+  Future<void> updatePolylines(PolylineUpdates polylineUpdates,
+      {required int mapId}) {
+    throw UnimplementedError('updatePolylines() has not been implemented.');
+  }
+
+  /// 更新polygon的数据
+  Future<void> updatePolygons(PolygonUpdates polygonUpdates,
+      {required int mapId}) {
+    throw UnimplementedError('updatePolygons() has not been implemented.');
+  }
+
+  /// 移动镜头到一个新的位置
+  Future<void> moveCamera(
+    CameraUpdate cameraUpdate, {
+    required int mapId,
+    bool animated = true,
+    int duration = 0,
+  }) {
+    throw UnimplementedError('moveCamera() has not been implemented.');
+  }
+
+  /// 展示marker InfoWindow
+  Future<void> showInfoWindow(String markerId, {required int mapId}) {
+    throw UnimplementedError('showInfoWindow() has not been implemented.');
+  }
+
+  /// 隐藏marker InfoWindow
+  Future<void> hideInfoWindow({required int mapId}) {
+    throw UnimplementedError('hideInfoWindow() has not been implemented.');
+  }
+
+  /// 设置地图每秒渲染的帧数
+  Future<void> setRenderFps(int fps, {required int mapId}) {
+    throw UnimplementedError('setRenderFps() has not been implemented.');
+  }
+
+  /// 截屏
+  Future<Uint8List?> takeSnapshot({required int mapId}) {
+    throw UnimplementedError('takeSnapshot() has not been implemented.');
+  }
+
+  ///判断 点坐标是否在polygon 多边形内
+  ///@param point 点坐标
+  Future<bool?> containsPoint(LatLng point, String id, {required int mapId}) {
+    throw UnimplementedError('takeSnapshot() has not been implemented.');
+  }
+
+  /// 地图可视区域
+  Future<dynamic> getVisibleRegion({required int mapId}) {
+    throw UnimplementedError('getVisibleRegion() has not been implemented.');
+  }
+
+  /// 地图可视区域
+  Future<void> searchPoi(String query, int searchType,
+      {required int mapId, double latitude = 0.0, double longitude = 0.0}) {
+    throw UnimplementedError('searchPoi() has not been implemented.');
+  }
+
+  /// 地图搜索inputTip
+  Future<void> searchInput(String query, {required int mapId}) {
+    throw UnimplementedError('searchInput() has not been implemented.');
+  }
+
+  /// 地图搜索regeocode
+  Future<void> searchRegeocode(double latitude, double longitude,
+      {required int mapId}) {
+    throw UnimplementedError('searchRegeocode() has not been implemented.');
+  }
+
+  /// 获取地图审图号（普通地图）
+  Future<String?> getMapContentApprovalNumber({required int mapId}) {
+    throw UnimplementedError(
+        'getMapContentApprovalNumber() has not been implemented.');
+  }
+
+  /// 获取地图审图号（卫星地图）
+  Future<String?> getSatelliteImageApprovalNumber({required int mapId}) {
+    throw UnimplementedError(
+        'getSatelliteImageApprovalNumber() has not been implemented.');
+  }
+
+  /// 清空缓存
+  Future<void> clearDisk({required int mapId}) {
+    throw UnimplementedError('clearDisk() has not been implemented.');
+  }
+
+  ///只用于测试
+  ///用于与native的通信
+  MethodChannel channel(int mapId) {
+    throw UnimplementedError('channel() has not been implemented.');
+
+  }
 }

lib/src/core/method_channel_amap_flutter_map.dart

 import 'dart:async';
-import 'dart:html';
-import 'dart:js_util';
-import 'dart:typed_data';
 
 import 'package:amap_flutter_base/amap_flutter_base.dart';
 import 'package:amap_flutter_map/src/core/amap_flutter_platform.dart';
-import 'package:amap_flutter_map/src/types/input_tips_result.dart';
-import 'package:amap_flutter_map/src/types/poi_result.dart';
-import 'package:amap_flutter_map/src/types/regeocode_result.dart';
 import 'package:amap_flutter_map/src/types/types.dart';
-import 'package:amap_flutter_map/src/utils/platform_utils.dart';
-import 'package:amap_flutter_map/src/web/amap.dart';
-import 'package:amap_flutter_map/src/web/amap_loader.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
-import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 import 'package:stream_transform/stream_transform.dart';
-import 'dart:ui' as ui;
 
 import 'map_event.dart';
 
@@ -28,6 +17,9 @@ const VIEW_TYPE = 'com.amap.flutter.map';
 class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
   final Map<int, MethodChannel> _channels = {};
 
+  ///只用于测试
+  ///用于与native的通信
+  @override
   MethodChannel channel(int mapId) {
     return _channels[mapId]!;
   }
@@ -44,6 +36,7 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
   }
 
   ///更新地图参数
+  @override
   Future<void> updateMapOptions(
     Map<String, dynamic> newOptions, {
     required int mapId,
@@ -57,6 +50,7 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
   }
 
   /// 更新Marker的数据
+  @override
   Future<void> updateMarkers(
     MarkerUpdates markerUpdates, {
     required int mapId,
@@ -68,6 +62,7 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
   }
 
   /// 更新polyline的数据
+  @override
   Future<void> updatePolylines(
     PolylineUpdates polylineUpdates, {
     required int mapId,
@@ -79,6 +74,7 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
   }
 
   /// 更新polygon的数据
+  @override
   Future<void> updatePolygons(
     PolygonUpdates polygonUpdates, {
     required int mapId,
@@ -91,6 +87,7 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
 
   ///判断 点坐标是否在polygon 多边形内
   ///@param point 点坐标
+  @override
   Future<bool?> containsPoint(LatLng point, String id, {required int mapId}) {
     return channel(mapId).invokeMethod<bool>(
       'polygon#containsPoint',
@@ -127,46 +124,6 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
         creationParams: creationParams,
         creationParamsCodec: const StandardMessageCodec(),
       );
-    } else if (PlatformUtils.isWeb) {
-      late DivElement _element;
-
-      /// 这里使用时间作为唯一标识
-      String _divId = DateTime.now().toIso8601String();
-
-      /// 先创建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;
-      });
-      SchedulerBinding.instance.addPostFrameCallback((_) {
-        /// 创建地图
-        var promise = load(LoaderOptions(
-          key: 'f759e608583c169bb23d7817ed05583d',
-          version: '2.0',
-          plugins: ['AMap.Scale'],
-        ));
-
-        promiseToFuture(promise).then((value) {
-          print('初始化成功');
-          MapOptions _mapOptions = MapOptions(
-            zoom: 13,
-          );
-          AMap aMap = AMap(_element, _mapOptions);
-        }, onError: (e) {
-          print('初始化错误：$e');
-        });
-      });
-
-      return HtmlElementView(
-        viewType: _divId,
-        onPlatformViewCreated: onPlatformViewCreated,
-      );
     }
     return Text('当前平台:$defaultTargetPlatform, 不支持使用高德地图插件');
   }
@@ -179,56 +136,74 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
   Stream<MapEvent> _events(int mapId) =>
       _mapEventStreamController.stream.where((event) => event.mapId == mapId);
 
-  //定位回调
+  ///定位回调
+  @override
   Stream<LocationChangedEvent> onLocationChanged({required int mapId}) {
     return _events(mapId).whereType<LocationChangedEvent>();
   }
 
-  //Camera 移动回调
+  /// Camera 移动回调
+  @override
   Stream<CameraPositionMoveEvent> onCameraMove({required int mapId}) {
     return _events(mapId).whereType<CameraPositionMoveEvent>();
   }
 
   ///Camera 移动结束回调
+  @override
   Stream<CameraPositionMoveEndEvent> onCameraMoveEnd({required int mapId}) {
     return _events(mapId).whereType<CameraPositionMoveEndEvent>();
   }
 
   ///Camera 搜索POI回调
+  @override
   Stream<MapSearchPOIEvent> mapSearchPOI({required int mapId}) {
     return _events(mapId).whereType<MapSearchPOIEvent>();
   }
 
   ///Camera 搜索inputtips回调
+  @override
   Stream<MapSearchInputTipsEvent> mapSearchInputTips({required int mapId}) {
     return _events(mapId).whereType<MapSearchInputTipsEvent>();
   }
 
   ///Camera 搜索regeocode回调
+  @override
   Stream<MapSearchRegeocodeEvent> mapSearchRegeocode({required int mapId}) {
     return _events(mapId).whereType<MapSearchRegeocodeEvent>();
   }
 
+  /// 地图点击回调
+  @override
   Stream<MapTapEvent> onMapTap({required int mapId}) {
     return _events(mapId).whereType<MapTapEvent>();
   }
 
+  /// 地图长按回调
+  @override
   Stream<MapLongPressEvent> onMapLongPress({required int mapId}) {
     return _events(mapId).whereType<MapLongPressEvent>();
   }
 
+  /// poi点击回调
+  @override
   Stream<MapPoiTouchEvent> onPoiTouched({required int mapId}) {
     return _events(mapId).whereType<MapPoiTouchEvent>();
   }
 
+  /// marker点击回调
+  @override
   Stream<MarkerTapEvent> onMarkerTap({required int mapId}) {
     return _events(mapId).whereType<MarkerTapEvent>();
   }
 
+  /// marker拖拽回调
+  @override
   Stream<MarkerDragEndEvent> onMarkerDragEnd({required int mapId}) {
     return _events(mapId).whereType<MarkerDragEndEvent>();
   }
 
+  /// polyline点击回调
+  @override
   Stream<PolylineTapEvent> onPolylineTap({required int mapId}) {
     return _events(mapId).whereType<PolylineTapEvent>();
   }
@@ -327,6 +302,7 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
   }
 
   ///移动镜头到一个新的位置
+  @override
   Future<void> moveCamera(
     CameraUpdate cameraUpdate, {
     required int mapId,
@@ -341,6 +317,7 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
   }
 
   /// 展示marker InfoWindow
+  @override
   Future<void> showInfoWindow(String markerId, {required int mapId}) {
     return channel(mapId)
         .invokeMethod<void>('markers#showInfoWindow', <String, dynamic>{
@@ -349,11 +326,13 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
   }
 
   /// 隐藏marker InfoWindow
+  @override
   Future<void> hideInfoWindow({required int mapId}) {
     return channel(mapId).invokeMethod<void>('markers#hideInfoWindow');
   }
 
   ///设置地图每秒渲染的帧数
+  @override
   Future<void> setRenderFps(int fps, {required int mapId}) {
     return channel(mapId)
         .invokeMethod<void>('map#setRenderFps', <String, dynamic>{
@@ -362,18 +341,21 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
   }
 
   ///截屏
+  @override
   Future<Uint8List?> takeSnapshot({
     required int mapId,
   }) {
     return channel(mapId).invokeMethod<Uint8List>('map#takeSnapshot');
   }
 
-  // 地图可视区域
+  /// 地图可视区域
+  @override
   Future<dynamic> getVisibleRegion({required int mapId}) {
     return channel(mapId).invokeMethod<dynamic>('map#visibleRegion');
   }
 
-  // 地图可视区域
+  /// 地图可视区域
+  @override
   Future<void> searchPoi(String query, int searchType,
       {required int mapId, double latitude = 0.0, double longitude = 0.0}) {
     return channel(mapId)
@@ -385,7 +367,8 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
     });
   }
 
-  // 地图搜索inputTip
+  /// 地图搜索inputTip
+  @override
   Future<void> searchInput(String query, {required int mapId}) {
     return channel(mapId)
         .invokeMethod<dynamic>('camera#searchInput', <String, dynamic>{
@@ -393,7 +376,8 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
     });
   }
 
-  // 地图搜索regeocode
+  /// 地图搜索regeocode
+  @override
   Future<void> searchRegeocode(double latitude, double longitude,
       {required int mapId}) {
     return channel(mapId)
@@ -403,14 +387,16 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
     });
   }
 
-  //获取地图审图号（普通地图）
+  /// 获取地图审图号（普通地图）
+  @override
   Future<String?> getMapContentApprovalNumber({
     required int mapId,
   }) {
     return channel(mapId).invokeMethod<String>('map#contentApprovalNumber');
   }
 
-  //获取地图审图号（卫星地图）
+  /// 获取地图审图号（卫星地图）
+  @override
   Future<String?> getSatelliteImageApprovalNumber({
     required int mapId,
   }) {
@@ -418,6 +404,8 @@ class MethodChannelAMapFlutterMap implements AMapFlutterPlatform {
         .invokeMethod<String>('map#satelliteImageApprovalNumber');
   }
 
+  /// 清空缓存
+  @override
   Future<void> clearDisk({
     required int mapId,
   }) {

lib/src/web/amap_flutter_map_web.dart

-import 'package:amap_flutter_map/src/core/amap_flutter_platform.dart';
-
-/**
- * web地图
- */
-class AmapFlutterMapWeb extends AMapFlutterPlatform {
-
-  AmapFlutterMapWeb();
-
-  static void registerViewFactory() {
-    AMapFlutterPlatform.instance = AmapFlutterMapWeb();
-  }
-
-}
\ No newline at end of file

lib/src/web/utils.dart

+@JS()
+library stringify;
+
+import 'package:js/js.dart';
+
+// Calls invoke JavaScript `JSON.stringify(obj)`.
+@JS('JSON.stringify')
+external String stringify(Object obj);
+
+@JS('console.log')
+external String consoleLog(Object obj);
\ No newline at end of file

pubspec.yaml

@@ -10,6 +10,8 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  flutter_web_plugins:
+    sdk: flutter
   flutter_plugin_android_lifecycle: ^2.0.1
   meta: ^1.3.0
   plugin_platform_interface: ^2.0.0
@@ -25,7 +27,7 @@ dev_dependencies:
   # https://github.com/dart-lang/pub/issues/2101 is resolved.
   flutter_driver:
     sdk: flutter
-#  test: ^1.16.5
+  #  test: ^1.16.5
   pedantic: ^1.11.0
   mockito: ^5.0.0-nullsafety.7
 
@@ -45,6 +47,9 @@ flutter:
         pluginClass: AMapFlutterMapPlugin
       ios:
         pluginClass: AMapFlutterMapPlugin
+      web:
+        pluginClass: AmapFlutterMapWeb
+        fileName: amap_flutter_map_web.dart
 
   # To add assets to your plugin package, add an assets section, like this:
   assets: