Flutter 调用百度地图API实战

在Flutter项目中集成百度地图API时遇到几个问题：

  1. 按照官方文档配置AndroidManifest.xml后，地图仍然无法显示，只出现网格背景，该如何排查？
  2. 百度地图SDK的定位功能在iOS端正常，但在Android端频繁返回错误码167，可能是什么原因？
  3. 如何自定义地图标记点(Marker)的图标并实现点击弹窗信息？官方示例的InfoWindow样式太简陋。
  4. 使用百度地图计算两点距离时，发现与真实距离偏差较大，是否需要特殊坐标系转换？
  5. Flutter热重载后地图控制器时常失效，必须重启应用才能恢复，有没有优化的解决方案？
3 回复

要在Flutter中调用百度地图API，首先需要注册百度地图开放平台账号并创建应用获取密钥。接着，在Flutter项目中通过webview_flutter插件加载百度地图的Web API。

  1. 添加依赖：webview_flutter: ^4.0.0
  2. 在AndroidManifest.xml和Info.plist中配置百度地图所需的权限和key。
  3. 使用WebView加载百度地图URL，传入你的经纬度参数，例如：
    WebView(
  initialUrl: 'https://map.baidu.com/?query=你的地址&src=0',
  javascriptMode: JavascriptMode.unrestricted,
)
  4. 若需调用具体功能（如定位、搜索），需使用百度地图JS API，通过WebView与JavaScript交互实现。

注意：由于百度地图API对域名有严格限制，确保正确配置回调协议及域名白名单。若需更复杂的功能，可考虑原生模块封装。

更多关于Flutter 调用百度地图API实战的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


首先在项目中添加百度地图SDK的依赖。在Android上需申请密钥，在manifest文件中配置密钥和权限。

代码实现：

  1. 创建地图页面，初始化BaiduMap对象。
  2. 使用LatLng设置地图中心点，通过MapStatusUpdateFactory.newLatLng()创建状态更新。
  3. 用BaiduMap.animateMapStatus()让地图移动到指定位置。
  4. 添加Marker标注点，使用OverlayOptions定义标记样式。
  5. 监听地图事件如点击等，通过设置Listener实现。

示例代码片段：

import 'package:flutter_baidu_mapapi_map/map.dart';

class BaiDuMapPage extends StatefulWidget {
  @override
  _BaiDuMapPageState createState() => _BaiDuMapPageState();
}

class _BaiDuMapPageState extends State<BaiDuMapPage> {
  late BMFMapController bmfMapController;

  @override
  Widget build(BuildContext context) {
    return BMFMapView(
      onBMFMapCreated: (controller) {
        bmfMapController = controller;
        // 设置中心点坐标
        var center = BMFCoordinate(39.9, 116.4);
        var mapOptions = BMFMapOptions(center: center);
        bmfMapController.setMapOptions(mapOptions);
      },
    );
  }
}

注意：需根据百度地图官方文档调整参数和处理错误情况。

Flutter调用百度地图API实战

基本配置步骤

  1. 获取百度地图API密钥

  2. 添加依赖

    dependencies:
  baidu_map_api: ^3.0.0  # 最新版本请查看pub.dev
  flutter_bmfmap: ^3.0.0

基础地图展示

import 'package:flutter/material.dart';
import 'package:flutter_bmfmap/flutter_bmfmap.dart';

class BaiduMapPage extends StatefulWidget {
  @override
  _BaiduMapPageState createState() => _BaiduMapPageState();
}

class _BaiduMapPageState extends State<BaiduMapPage> {
  BMFMapController? _controller;
  
  @override
  void initState() {
    super.initState();
    // 设置Android/iOS的AK
    BMFMapSDK.setApiKeyAndCoordType('你的百度地图AK');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BMFMapWidget(
        onBMFMapCreated: (controller) {
          _controller = controller;
          // 设置地图中心点
          _controller?.setCenterCoordinate(
            BMFCoordinate(39.915, 116.404), 
            animated: true
          );
          // 设置缩放级别
          _controller?.setZoomLevel(15);
        },
        mapOptions: BMFMapOptions(
          center: BMFCoordinate(39.915, 116.404),
          zoomLevel: 11,
        ),
      ),
    );
  }
}

常用功能实现

  1. 添加标记点
void addMarker() {
  BMFMarker marker = BMFMarker(
    position: BMFCoordinate(39.915, 116.404),
    title: '天安门',
    icon: 'assets/marker.png',
  );
  _controller?.addMarker(marker);
}
  1. 定位功能
void locate() {
  _controller?.updateLocationData(BMFUserLocation(
    location: BMFCoordinate(39.915, 116.404),
  ));
}
  1. 路线规划
void routePlan() {
  BMFRoutePlanNode start = BMFRoutePlanNode(
    coordinate: BMFCoordinate(39.915, 116.404),
  );
  BMFRoutePlanNode end = BMFRoutePlanNode(
    coordinate: BMFCoordinate(40.056, 116.308),
  );
  
  BMFRouteSearch routeSearch = BMFRouteSearch();
  routeSearch.drivingRouteSearch(
    from: start,
    to: end,
    onGetRoutePlan: (result, error) {
      if (error == null) {
        // 处理路线结果
      }
    },
  );
}

注意事项

  1. 需要在AndroidManifest.xml和Info.plist中配置百度地图AK
  2. 需要处理相应的权限请求
  3. 百度地图Flutter插件文档: https://lbsyun.baidu.com/index.php?title=flutter/loc
回到顶部