js添加多marker 高德地图_玩玩Flutter Web——实现高德地图插件

1.啰嗦几句

去年写了一个功能简单的高德地图插件给flutter_deer使用，当时支持了Android与iOS两端。前一阵子有一个issue问是否会支持Flutter Web，当时我有点懵，毕竟js我都不熟。。。不过先记下这个需求，等着有时间了去研究一下。

过了一个月，突然想起了这件事。就先去搜索了一下相关资料，发现都是实现的谷歌地图。而这些都使用到了一个google_maps的开源库。这个库其实就是借助js_wrapping封装了谷歌地图的js库，达到使用Dart代码调用js代码的目的。

没办法了，看来我也只能去封装高德地图的js了。本想着照葫芦画瓢使用js_wrapping去实现，后面发现Dart sdk有提供操作js api的dart:js，同时也提供了更易于使用的package:js。

2.Dart调用JS

这部分我尽量说的细一点，毕竟目前相关资料不多(还不快收藏起来~~)。避免大家像我一开始一样一头雾水。下面就以高德地图的Api来举例说明如何实现Dart调用JS代码，

首先在pubspec.yaml添加依赖：

dependencies:  #  https://pub.flutter-io.cn/packages/js#-readme-tab-  js: ^0.6.1+1

创建amapjs.dart文件，导入package:js，同时用@JS注解指定库名：

@JS('AMap')library amap;import 'package:js/js.dart';

这里的AMap实际就是高德js的库名。

如果我们要实现上图的调用，就需要接着定义Map对象：

@JS('AMap')library amap;import 'package:js/js.dart';// 这里`new Map(id)` 调用js的`new AMap.Map(id)`@JS()class Map {  external Map(String id);}

这里如果直接调用Map 可能会和Map产生歧义，所以我们可以给注解@JS指定name来化解问题：

@JS('Map')class AMap {  external AMap(String id);}

而添加external关键字的意思是指“外在”，也就是说这个方法是js代码实现的。

下面我们看一下Map的文档：

Map的构造方法不止一个div id这么简单，也可能是HTMLDivElement，所以我们不能使用之前的String类型了。同时有MapOptions这个初始化的参数对象。

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

而MapOptions实际是一个Map结构，并不是一个类，所以我们需要添加@anonymou