如何在Flutter Web中展示中国小区位置？需使用国内地图服务商

步骤1：准备百度地图开发者资源 #

• 注册百度地图开发者账号，申请Web端API密钥（AK）
• 确保AK的权限配置中添加你的Flutter Web应用部署域名，避免调用限制

步骤2：通过HtmlElementView嵌入百度地图 #

Flutter Web直接调用百度地图Web端JS API，比第三方包更适配国内地图服务，核心实现如下：

1. 加载百度地图JS脚本 #

在项目根目录的index.html <head>标签中添加脚本（替换你的AK为实际申请的密钥）：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>

2. 实现地图Widget #

创建自定义Widget，通过HtmlElementView渲染百度地图：

import 'dart:html' as html;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class BaiduMapWidget extends StatefulWidget {
  final double latitude; // 小区纬度
  final double longitude; // 小区经度
  final String communityName; // 小区名称

  const BaiduMapWidget({
    super.key,
    required this.latitude,
    required this.longitude,
    required this.communityName,
  });

  @override
  State<BaiduMapWidget> createState() => _BaiduMapWidgetState();
}

class _BaiduMapWidgetState extends State<BaiduMapWidget> {
  final String _mapId = 'baidu_map_container';

  @override
  void initState() {
    super.initState();
    // 注册HTML容器
    ui.platformViewRegistry.registerViewFactory(
      _mapId,
      (int viewId) {
        final mapContainer = html.DivElement()
          ..id = _mapId
          ..style.width = '100%'
          ..style.height = '100%'
          ..style.border = 'none';

        // 初始化地图
        html.window.onLoad.listen((event) {
          final BMap = html.window['BMap'];
          final map = BMap['Map'].callMethod('new', [mapContainer]);
          // 设置中心点与缩放级别（18级可清晰展示小区细节）
          final point = BMap['Point'].callMethod('new', [widget.longitude, widget.latitude]);
          map.callMethod('centerAndZoom', [point, 18]);
          // 添加小区标记
          final marker = BMap['Marker'].callMethod('new', [point]);
          map.callMethod('addOverlay', [marker]);
          // 添加点击弹窗
          final infoWindow = BMap['InfoWindow'].callMethod('new', [widget.communityName]);
          marker.callMethod('addEventListener', ['click', () => map.callMethod('openInfoWindow', [infoWindow, point])]);
        });

        return mapContainer;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 400, // 自定义地图高度
      child: HtmlElementView(viewType: _mapId),
    );
  }
}

3. 调用地图Widget #

在页面中直接引入使用：

BaiduMapWidget(
  latitude: 39.908860, // 替换为小区实际纬度
  longitude: 116.397390, // 替换为小区实际经度
  communityName: 'XX小区',
)

关键注意事项 #

• 经纬度获取：若只有小区名称，可通过百度地图地理编码API将地址转换为经纬度
• 权限配置：百度地图AK需设置正确的Referer白名单，否则会出现API调用失败
• 缩放级别：国内小区推荐使用17-19级缩放，保证细节展示
• 适配优化：可监听窗口resize事件，调用地图resize方法确保渲染正常

内容的提问来源于stack exchange，提问作者Hamza Abbad