來一手Flutter Web =-= 實現高德地圖外掛

現組建了一個flutter的水友圈，有Android的混合開發及flutter分析，還有Dart語法詳解等資料；可以從初始flutter到flutter進階視訊學習，包括flutter優化及開源實戰，文末有進圈方式

1.調侃一下

2.Dart呼叫JS

dependencies:
  #  https://pub.flutter-io.cn/packages/js#-readme-tab-
  js: ^0.6.1+1複製程式碼

@JS('AMap')
library amap;

import 'package:js/js.dart';複製程式碼

@JS('AMap')
library amap;

import 'package:js/js.dart';

// 這裡`new Map(id)` 呼叫js的`new AMap.Map(id)`
@JS()
class Map {
  external Map(String id);
}複製程式碼

@JS('Map')
class AMap {
  external AMap(String id);
}複製程式碼

@JS('Map')
class AMap {
  external AMap(dynamic /*String|HTMLDivElement*/ div, MapOptions opts);
}複製程式碼

@JS()
@anonymous
class MapOptions {
  external factory MapOptions({
    /// 初始中心經緯度
    LngLat center,
    /// 地圖顯示的縮放級別
    num zoom,
    /// 地圖檢視模式, 預設為‘2D’
    String /*‘2D’|‘3D’*/ viewMode,
  });
}複製程式碼

@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);
}複製程式碼

MapOptions _mapOptions = MapOptions(
  zoom: 11,
  viewMode: '3D',
  center: LngLat(116.397428, 39.90923),
);
AMap aMap = AMap('container', _mapOptions);複製程式碼

3.進階

來自JavaScript的陣列例項總是List<dynamic> JavaScript陣列沒有具體的元素型別，因此JavaScript函式返回的陣列不能在不檢查每個元素的情況下保證其元素型別。

// true
print(list is List);
// false
print(list is List<String>);複製程式碼

@JS()
@anonymous
class PoiList {
  external List<dynamic> get pois;
}

@JS()
@anonymous
class Poi {
  external String get citycode;
  external String get cityname;
  external String get adname;
  external String get name;
  ...
}

// 使用時
pois.forEach((poi) {
  if (poi is Poi) {
       poi.citycode;
       ...
  }
});複製程式碼

2.回撥

mapObj.plugin(["AMap.ToolBar"], function() {
    //載入工具條
    var tool = new AMap.ToolBar();
    mapObj.addControl(tool);
});複製程式碼

@JS('Map')
class AMap {
  external AMap(dynamic /*String|HTMLDivElement*/ div, MapOptions opts);
  /// 載入外掛
  external plugin(dynamic/*String|List*/ name, void Function() callback); 
}複製程式碼

import 'package:js/js.dart';
// 錯誤
mapObj.plugin(['AMap.ToolBar'], () {
  mapObj.addControl(ToolBar());
});
// 正確
mapObj.plugin(['AMap.ToolBar'], allowInterop(() {
  mapObj.addControl(ToolBar());
}));複製程式碼

3.非同步

@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,
  });
}複製程式碼

Future<T> promiseToFuture<T>(jsPromise) {
  final completer = Completer<T>();

  final success = convertDartClosureToJS((r) => completer.complete(r), 1);
  final error = convertDartClosureToJS((e) => completer.completeError(e), 1);

  JS('', '#.then(#, #)', jsPromise, success, error);
  return completer.future;
}複製程式碼

import 'dart:js_util';

var promise = load(LoaderOptions(
  key: 'xxx',
  version: '2.0',
  plugins: ['AMap.Scale'],
));

promiseToFuture(promise).then((value) {
  AMap aMap = AMap('container');
  ...      
}, onError: (e) {
  print('初始化錯誤：$e');
});複製程式碼

4.顯示地圖

<script src="https://webapi.amap.com/loader.js"></script>複製程式碼

/// 這裡使用時間作為唯一標識
_divId = DateTime.now().toIso8601String();
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(_divId, (int viewId) => HtmlElement());

return HtmlElementView(
  viewType: _divId,
);複製程式碼

@Native("HTMLDivElement")
class DivElement extends HtmlElement {
  // To suppress missing implicit constructor warnings.
  factory DivElement._() {
    throw new UnsupportedError("Not supported");
  }

  factory DivElement() => JS('returns:DivElement;creates:DivElement;new:true',
      '#.createElement(#)', document, "div");
  /**
   * Constructor instantiated by the DOM when a custom element has been created.
   *
   * This can only be called by subclasses from their created constructor.
   */
  DivElement.created() : super.created();
}複製程式碼

import 'dart:html';
import 'dart:ui' as ui;

String _divId;
DivElement _element;

@override
void initState() {
  super.initState();
  /// 這裡使用時間作為唯一標識
  _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: 'xxx',
      version: '2.0',
      plugins: ['AMap.Scale'],
    ));

    promiseToFuture(promise).then((value) {
      AMap aMap = AMap(_element);
    }, onError: (e) {
      print('初始化錯誤：$e');
    });
  });
}

@override
Widget build(BuildContext context) {
  return HtmlElementView(
    viewType: _divId,
  );
}複製程式碼

• 高德地圖的logo、定位、比例尺這類不顯示，部分在地圖的左上角被地圖層覆蓋。
• 地圖上的覆蓋物新增後無法修改。
• 地圖上的覆蓋物在地圖放大縮小後位置偏離。（和第二點類似）

flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_SKIA=true複製程式碼

• 自動定位並根據當前經緯度進行POI搜尋
• 點選地圖獲取經緯度並進行POI搜尋
• 點選地址資訊，移動地圖至當前位置
• POI搜尋功能

結語