使用flutter web 搭建腾讯地图基础插件 只提供思路 具体功能还需要自己实现，参考 玩玩Flutter Web —— 实现高德地图插件 使用逻辑一致

效果如下

1.添加腾讯地图回调函数 js

添加 tenxunmapjs.js

var resolve1;

function loadMap(key) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.charset = "utf-8";
    script.src = "https://map.qq.com/api/js?v=2.exp&key=" + key + "&callback=initMap";
    document.body.appendChild(script);
    return new Promise((resolve, reject) => {
        this.resolve1 = resolve;
    });
}

function initMap() {
    resolve1('ok')
}

添加 tenxunmapjs.dart

import 'package:js/js.dart';


@JS('loadMap')
external loadMap(String key);

index.html 引入

<script src="map/tenxunmap.js"></script>

2、添加地图tmapjs.dart

@JS('qq.maps')
library tmap;

import 'package:js/js.dart';

/// 腾讯地图js，文档：https://lbs.qq.com/javascript_v2/doc/mapoptions.html

@JS("Map")
class TMap {
  // (必填) 地图DOM容器的id，创建地图需要在页面中创建一个空div元素，传入该div元素的id
  external TMap(dynamic domId, MapOptions options);

  //设置中心点
  external setCenter(LatLng latLng);

  external getCenter();

  // 设置地图显示的缩放级别 支持3～20。
  external setZoom(num zoom);

  external getZoom();


}



@JS()
class LatLng {
  external LatLng(num lat, num lng);

  external num getLng();

  external num getLat();
}

@JS()
@anonymous
class MapOptions {
  external factory MapOptions({
    /// 初始中心经纬度
    LatLng center,

    /// 地图显示的缩放级别
    num zoom,

    ///比例尺控件的初始启用/停用状态。
    bool /*‘2D’|‘3D’*/ scaleControl,

    ///平移控件的初始启用/停用状态。
    bool /*‘2D’|‘3D’*/ panControl,

    /// 地图类型控件的初始启用/停用状态。
    bool /*‘2D’|‘3D’*/ mapTypeControl,
    ///缩放控件的初始启用/停用状态。
    bool /*‘2D’|‘3D’*/ zoomControl,
  });

  external LatLng get center;

  external num get zoom;


  external bool get scaleControl;

  external bool get panControl;

  external bool get mapTypeControl;

  external bool get zoomControl;
}

3、添加地图监听 eventjs.dart

@JS('qq.maps.event')
library tmap;

import 'package:js/js.dart';
//import 'package:web_tenxun_map/web/tmapjs.dart'; 导入tmapjs.dart 中路径


external  addListener(TMap map,String type, Function callback);

4、使用地图

/// 这里使用时间作为唯一标识
_divId = DateTime.now().toIso8601String();

/// 先创建div并注册
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(_divId, (int viewId) {
  /// 地图需要的Div
  _element = DivElement()
    ..id = "ten-xun-map"
    ..style.width = '100%'
    ..style.height = '100%'
    ..style.margin = '0';
  return _element;
});

SchedulerBinding.instance.addPostFrameCallback((_) async {
  /// 创建地图
  var promise = loadMap(widget.mapKey);

  promiseToFuture(promise).then((value) {
    final MapOptions _mapOptions = MapOptions(
        zoom: 20,
        // scaleControl: false,
        // panControl: false,
        mapTypeControl: false,
        zoomControl: false,
        center: LatLng(lat, lon));

    aMap = TMap(_element.id, _mapOptions);
    addListener(aMap!, "center_changed", allowInterop((event) {
       地图变化回调
    }));
  }, onError: (e) {
    print('初始化错误：$e');
  });
});