flutter 基于百度地图的地图选址，包括移动选址，地区搜索 ，仿微信地图选址

最新推荐文章于 2024-06-10 09:54:39 发布
最新推荐文章于 2024-06-10 09:54:39 发布
阅读量2.3k 收藏 3
点赞数 4
分类专栏： Flutter学习与记录 文章标签： flutter 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013937668/article/details/128326298
版权

flutter 最近有在地图上选择地址的需求，要求如下

1.移动地图获取根据地图中心点获取周边的poi信息

2.搜索，根据搜索内容提示相关地点信息，点击移动到相关位置，显示出该位置周边的poi信息

废话少说，先上视频

flutter百度地图选址

百度地图的集成这个就不说了，直接参考官网集成即可，咱们直接看实现代码

先看布局

布局比较简单，就是上面两个按钮，下面是固定高度的搜索框和列表，有一些我封装的内容，大家可以自行绘制，主要看与地图相关的内容即可

return Column(
      children: [
        Expanded(
            child: Stack(
          children: [
            BMFMapWidget(
              onBMFMapCreated: (controller) {
                viewModel.mapController = controller;
                onBMFMapCreated();
              },
              mapOptions: viewModel.mapOptions,
            ),
            Container(
              padding: const EdgeInsets.fromLTRB(10, 10, 10, 20),
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color(0x80a6a6a6),
                    //white,
                    transparent,
                  ],
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  TextView(
                    "取消",
                    textSize: 15,
                    textColor: Colors.white,
                    paddingLeft: 10,
                    paddingRight: 10,
                    paddingTop: 5,
                    paddingBottom: 5,
                    onClick: () {
                      Get.back();
                    },
                  ),
                  TextView(
                    "确定",
                    backgroundColor: green,
                    cornerRadius: 2,
                    textSize: 15,
                    textColor: Colors.white,
                    paddingLeft: 10,
                    paddingTop: 5,
                    paddingBottom: 5,
                    paddingRight: 10,
                    onClick: () {
                      if (viewModel.poiChooseName.isEmpty) {
                        showToast("您还未选择任何地址");
                      }  else{
                        Get.back(result: viewModel.poiInfo);
                      }

                    },
                  )
                ],
              ),
            ),
            Center(
                child: ImageView(
              "assets/images/ic_map_location.png",
              width: 30,
              height: 30,
            )),
          ],
        )),
        MyContainer(
          height: viewModel.contentHieght,
          backgroundColor: Colors.white,
          cornerRadius: 10,
          child: Column(
            children: [
              const SizedBox(
                height: 10,
              ),
              CommonSearchLayout(viewModel.searchController),
              Expanded(
                child: MyListView(
                    viewModel.isSearch
                        ? viewModel.suggestList
                        : viewModel.poiList,
                    dividerHeight: 1,
                    dividerColor: dividerColor, (context, index) {
                  if (viewModel.isSearch) {
                    //搜索
                    return SuggestItem(viewModel.suggestList[index], index,
                        (index1) {
                      onSuggestChoose(index1);
                    });
                  } else {
                    //选择
                    return PoiItem(
                        viewModel.poiList[index], viewModel.poiChooseName,
                        (text) {
                      viewModel.poiChooseName = text;
                      viewModel.poiInfo = viewModel.poiList[index];
                      notifyChanges();
                    });
                  }
                }),
              )
            ],
          ),
        )
      ],
    );

展现出来的样式

注意地图创建后调用的发方法onBMFMapCreated()，当地图创建之后，判断地图是否确实是被加载好了，加载好了之后就调用一个获取用户位置的方法，把用户当前定位挪到地图中心去，然后设置地图监听，也就是当地区的中心区域有变化的时候，重新获取地图中心点周边的poi信息

void onBMFMapCreated() {
    //地图被创建
    viewModel.mapController.setMapDidLoadCallback(callback: () {
      //地图已加载,地图中心移动到用户所在的位置
      showUserLocation();
    });

    //监听地图区域变化
    viewModel.mapController.setMapRegionDidChangeWithReasonCallback(callback:
        (BMFMapStatus mapStatus, BMFRegionChangeReason regionChangeReason) {
      print("地图区域变化：${mapStatus.targetGeoPt!.latitude}");
      viewModel.poiChooseName = "";
      //根据地图中心点检索周边事物
      getPoiByLocation(
          mapStatus.targetGeoPt!.latitude, mapStatus.targetGeoPt!.longitude);
      notifyChanges();
    });
  }

 获取用户位置并且把用户位置移动到中央，LocationUtils().getCurrentLocation()是我自己封装的获取用户当前位置的方法，调用的是百度地图官方的sdk的方法，自己封装了一下，这块大家可以自己来写

//获取用户位置并移动地图到人员中心
  void showUserLocation() {
    LocationUtils().getCurrentLocation(context, (info) {
      viewModel.mapOptions = BMFMapOptions(
        center: BMFCoordinate(info.latitude!, info.longitude!),
        zoomLevel: viewModel.mapLevel,
      );
      viewModel.mapController.updateMapOptions(viewModel.mapOptions);
      getPoiByLocation(info.latitude!, info.longitude!);
    });
  }

然后重点来了getPoiByLocation()，这个方法很重要，这个方法是干什么的呢，这个方法就是根据坐标获取周边poi信息的方法，本质上就是坐标转地址（反地理编码），他会给出很多这个坐标周边的poi信息，这个周边的poi信息就是咱们最关键最需要的信息

这里面相应的位置点的名称、地址、坐标什么的就都获取到了，List<BMFPoiInfo>? list，这个就是获取到的poi信息的列表，里面我做了一些小处理，根据搜索的内容把转化的poi信息与之相符的放在第一位，这个列表获取到了，后续怎么处理根据需求自行处理即可

//反地理编码，根据坐标查询poi信息
void getPoiByLocation(double latitude, double longitude) async {
    BMFReverseGeoCodeSearchOption reverseGeoCodeSearchOption =
        BMFReverseGeoCodeSearchOption(
            location: BMFCoordinate(latitude, longitude));
    // 检索实例
    BMFReverseGeoCodeSearch reverseGeoCodeSearch = BMFReverseGeoCodeSearch();
    // 逆地理编码回调
    reverseGeoCodeSearch.onGetReverseGeoCodeSearchResult(callback:
        (BMFReverseGeoCodeSearchResult result, BMFSearchErrorCode errorCode) {
      List<BMFPoiInfo>? list = result.poiList;
      viewModel.poiList.clear();
      if (result.poiList!.isNotEmpty) {
        viewModel.poiList.addAll(result.poiList!);
        if (viewModel.poiChooseName.isNotEmpty) {
          late BMFPoiInfo info;
          for (int i = 0; i < viewModel.poiList.length; i++) {
            if (viewModel.poiList[i].name == viewModel.poiChooseName) {
              viewModel.poiInfo = viewModel.poiList[i];
              viewModel.poiList.removeAt(i);
              viewModel.poiList.insert(0, viewModel.poiInfo);
            }
          }
        }
        notifyChanges();
        for (int i = 0; i < list!.length; i++) {
          BMFPoiInfo info = list[i];
          print("poi信息：${info.name!}---${info.address!}");
          print("poi信息：${info.pt!.longitude}---${info.pt!.latitude}");
        }
      } else {
        print("poi信息：空");
      }
      //print(`逆地理编码  errorCode = ${errorCode}  \n result = ${result?.toMap()}`);
      // 解析reslut，具体参考demo
    });
    await reverseGeoCodeSearch.reverseGeoCodeSearch(reverseGeoCodeSearchOption);
  }

再然后就是搜索了，因为我搜索和现实位置的时候用的是同一个listview，所以我加了一个状态的判断

//当前是否是搜索的状态
  bool isSearch = false;

以此来判断当前是显示poi信息，还是显示的搜索结果，监听输入框，当输入文字有变化的时候，搜索内容，关键方法searchLocation(),cityname给一个就行，不给会报错，是可以进行全国范围内搜索的，这个点不要怕

//根据输入的内容搜索相应的位置
  void searchLocation() async {
    viewModel.suggestList.clear();
    BMFSuggestionSearchOption suggestionSearchOption =
        BMFSuggestionSearchOption(
            keyword: viewModel.searchController.text, cityname: '北京市');
    BMFSuggestionSearch suggestionSearch = BMFSuggestionSearch();
    suggestionSearch.onGetSuggestSearchResult(callback:
        (BMFSuggestionSearchResult result, BMFSearchErrorCode errorCode) {
      if (result.suggestionList!.isNotEmpty) {
        //有搜索结果
        viewModel.suggestList.addAll(result.suggestionList!);
        for (int i = 0; i < result.suggestionList!.length; i++) {
          print("提醒位置：${result.suggestionList![i].key}");
        }
      } else {
        print("提醒位置：空");
      }
      notifyChanges();
    });
    await suggestionSearch.suggestionSearch(suggestionSearchOption);
  }

当选择了搜索的位置之后，就需要把地图移动到相应的位置，然后重新获取次位置周边的poi信息

，主要方法onSuggestChoose(),当搜索提示的位置选择之后需要做的处理

void onSuggestChoose(int index) {
    //选中此项
    viewModel.suggestInfo = viewModel.suggestList[index];
    viewModel.poiChooseName = viewModel.suggestInfo.key!;
    //位置移动到此处
    viewModel.mapOptions = BMFMapOptions(
      center: BMFCoordinate(viewModel.suggestInfo.location!.latitude,
          viewModel.suggestInfo.location!.longitude),
      //zoomLevel: viewModel.mapLevel,
    );
    viewModel.mapController.updateMapOptions(viewModel.mapOptions);
    //关闭键盘
    SystemChannels.textInput.invokeMethod('TextInput.hide');
    //搜索周边poi
    getPoiByLocation(viewModel.suggestInfo.location!.latitude,
        viewModel.suggestInfo.location!.longitude);
    //搜索状态改为选择状态
    viewModel.isSearch = false;
    notifyChanges();
  }

核心代码基本上就是这样，其中一些组件是我封装的，无非也就是一些textfield，text，listview之类的，整体是封装了state，使用的是get_it这个库进行状态管理

下面我把完整的代码贴上来，大家参考一下

主要页面，大家的布局直接放在build里面就行，我外面进行了一次封装

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_baidu_mapapi_map/flutter_baidu_mapapi_map.dart';
import 'package:flutter_baidu_mapapi_search/flutter_baidu_mapapi_search.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:get/get.dart';
import 'package:status_bar_control/status_bar_control.dart';
import 'package:zuguantong/activity/map/choose/item_poi.dart';
import 'package:zuguantong/activity/map/choose/item_suggest.dart';
import 'package:zuguantong/activity/map/choose/mapchoose_view_model.dart';
import 'package:zuguantong/yuchuangbase/const/colors.dart';
import 'package:zuguantong/yuchuangbase/utils/location_utils.dart';
import 'package:zuguantong/yuchuangbase/widget/ImageView.dart';
import 'package:zuguantong/yuchuangbase/widget/MyContainer.dart';
import 'package:zuguantong/yuchuangbase/widget/MyListView.dart';
import 'package:zuguantong/yuchuangbase/widget/TextView.dart';
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart';
import '../../../yuchuangbase/base/base_state.dart';
import '../../../yuchuangbase/widget/CommonSearchLayout.dart';

///地图选址
class MapChooseActivity extends StatefulWidget {
  var keyboardVisibilityController = KeyboardVisibilityController();

  MapChooseActivity({Key? key}) : super(key: key);

  @override
  State<MapChooseActivity> createState() => _MapChooseActivityState();
}

class _MapChooseActivityState
    extends BaseState<MapChooseActivity, MapChooseViewModel> {
  @override
  void onCreate() async {
    hideTitle();
    showContent();
    viewModel.searchController.addListener(() {
      print("内容变化：开始");
      if (viewModel.searchController.text.isEmpty) {
        viewModel.isSearch = false;
        notifyChanges();
      }  else{
        viewModel.isSearch = true;
        searchLocation();
      }

    });
    //await StatusBarControl.setHidden(true, animation:StatusBarAnimation.NONE);
    widget.keyboardVisibilityController.onChange.listen((bool visible) {
      print('键盘: $visible');
      if (visible) {
        viewModel.isSearch = true;
      } else {
        viewModel.isSearch = false;
      }
      notifyChanges();
    });
  }

  @override
  void dispose() {
    super.dispose();
    SystemChannels.textInput.invokeMethod('TextInput.hide');
  }

  @override
  getContent(BuildContext context) {
    return Column(
      children: [
        Expanded(
            child: Stack(
          children: [
            BMFMapWidget(
              onBMFMapCreated: (controller) {
                viewModel.mapController = controller;
                onBMFMapCreated();
              },
              mapOptions: viewModel.mapOptions,
            ),
            Container(
              padding: const EdgeInsets.fromLTRB(10, 10, 10, 20),
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color(0x80a6a6a6),
                    //white,
                    transparent,
                  ],
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  TextView(
                    "取消",
                    textSize: 15,
                    textColor: Colors.white,
                    paddingLeft: 10,
                    paddingRight: 10,
                    paddingTop: 5,
                    paddingBottom: 5,
                    onClick: () {
                      Get.back();
                    },
                  ),
                  TextView(
                    "确定",
                    backgroundColor: green,
                    cornerRadius: 2,
                    textSize: 15,
                    textColor: Colors.white,
                    paddingLeft: 10,
                    paddingTop: 5,
                    paddingBottom: 5,
                    paddingRight: 10,
                    onClick: () {
                      if (viewModel.poiChooseName.isEmpty) {
                        showToast("您还未选择任何地址");
                      }  else{
                        Get.back(result: viewModel.poiInfo);
                      }

                    },
                  )
                ],
              ),
            ),
            Center(
                child: ImageView(
              "assets/images/ic_map_location.png",
              width: 30,
              height: 30,
            )),
          ],
        )),
        MyContainer(
          height: viewModel.contentHieght,
          backgroundColor: Colors.white,
          cornerRadius: 10,
          child: Column(
            children: [
              const SizedBox(
                height: 10,
              ),
              CommonSearchLayout(viewModel.searchController),
              Expanded(
                child: MyListView(
                    viewModel.isSearch
                        ? viewModel.suggestList
                        : viewModel.poiList,
                    dividerHeight: 1,
                    dividerColor: dividerColor, (context, index) {
                  if (viewModel.isSearch) {
                    //搜索
                    return SuggestItem(viewModel.suggestList[index], index,
                        (index1) {
                      onSuggestChoose(index1);
                    });
                  } else {
                    //选择
                    return PoiItem(
                        viewModel.poiList[index], viewModel.poiChooseName,
                        (text) {
                      viewModel.poiChooseName = text;
                      viewModel.poiInfo = viewModel.poiList[index];
                      notifyChanges();
                    });
                  }
                }),
              )
            ],
          ),
        )
      ],
    );
  }

  void onBMFMapCreated() {
    //地图被创建
    viewModel.mapController.setMapDidLoadCallback(callback: () {
      //地图已加载,地图中心移动到用户所在的位置
      showUserLocation();
    });

    //监听地图区域变化
    viewModel.mapController.setMapRegionDidChangeWithReasonCallback(callback:
        (BMFMapStatus mapStatus, BMFRegionChangeReason regionChangeReason) {
      print("地图区域变化：${mapStatus.targetGeoPt!.latitude}");
      viewModel.poiChooseName = "";
      //根据地图中心点检索周边事物
      getPoiByLocation(
          mapStatus.targetGeoPt!.latitude, mapStatus.targetGeoPt!.longitude);
      notifyChanges();
    });
  }

  //获取用户位置并移动地图到人员中心
  void showUserLocation() {
    LocationUtils().getCurrentLocation(context, (info) {
      viewModel.mapOptions = BMFMapOptions(
        center: BMFCoordinate(info.latitude!, info.longitude!),
        zoomLevel: viewModel.mapLevel,
      );
      viewModel.mapController.updateMapOptions(viewModel.mapOptions);
      getPoiByLocation(info.latitude!, info.longitude!);
    });
  }

  void getPoiByLocation(double latitude, double longitude) async {
    BMFReverseGeoCodeSearchOption reverseGeoCodeSearchOption =
        BMFReverseGeoCodeSearchOption(
            location: BMFCoordinate(latitude, longitude));
    // 检索实例
    BMFReverseGeoCodeSearch reverseGeoCodeSearch = BMFReverseGeoCodeSearch();
    // 逆地理编码回调
    reverseGeoCodeSearch.onGetReverseGeoCodeSearchResult(callback:
        (BMFReverseGeoCodeSearchResult result, BMFSearchErrorCode errorCode) {
      List<BMFPoiInfo>? list = result.poiList;
      viewModel.poiList.clear();
      if (result.poiList!.isNotEmpty) {
        viewModel.poiList.addAll(result.poiList!);
        if (viewModel.poiChooseName.isNotEmpty) {
          late BMFPoiInfo info;
          for (int i = 0; i < viewModel.poiList.length; i++) {
            if (viewModel.poiList[i].name == viewModel.poiChooseName) {
              viewModel.poiInfo = viewModel.poiList[i];
              viewModel.poiList.removeAt(i);
              viewModel.poiList.insert(0, viewModel.poiInfo);
            }
          }
        }
        notifyChanges();
        for (int i = 0; i < list!.length; i++) {
          BMFPoiInfo info = list[i];
          print("poi信息：${info.name!}---${info.address!}");
          print("poi信息：${info.pt!.longitude}---${info.pt!.latitude}");
        }
      } else {
        print("poi信息：空");
      }
      //print(`逆地理编码  errorCode = ${errorCode}  \n result = ${result?.toMap()}`);
      // 解析reslut，具体参考demo
    });
    await reverseGeoCodeSearch.reverseGeoCodeSearch(reverseGeoCodeSearchOption);
  }

  //根据输入的内容搜索相应的位置
  void searchLocation() async {
    viewModel.suggestList.clear();
    BMFSuggestionSearchOption suggestionSearchOption =
        BMFSuggestionSearchOption(
            keyword: viewModel.searchController.text, cityname: '北京市');
    BMFSuggestionSearch suggestionSearch = BMFSuggestionSearch();
    suggestionSearch.onGetSuggestSearchResult(callback:
        (BMFSuggestionSearchResult result, BMFSearchErrorCode errorCode) {
      if (result.suggestionList!.isNotEmpty) {
        //有搜索结果
        viewModel.suggestList.addAll(result.suggestionList!);
        for (int i = 0; i < result.suggestionList!.length; i++) {
          print("提醒位置：${result.suggestionList![i].key}");
        }
      } else {
        print("提醒位置：空");
      }
      notifyChanges();
    });
    await suggestionSearch.suggestionSearch(suggestionSearchOption);
  }

  void onSuggestChoose(int index) {
    //选中此项
    viewModel.suggestInfo = viewModel.suggestList[index];
    viewModel.poiChooseName = viewModel.suggestInfo.key!;
    //位置移动到此处
    viewModel.mapOptions = BMFMapOptions(
      center: BMFCoordinate(viewModel.suggestInfo.location!.latitude,
          viewModel.suggestInfo.location!.longitude),
      //zoomLevel: viewModel.mapLevel,
    );
    viewModel.mapController.updateMapOptions(viewModel.mapOptions);
    //关闭键盘
    SystemChannels.textInput.invokeMethod('TextInput.hide');
    //搜索周边poi
    getPoiByLocation(viewModel.suggestInfo.location!.latitude,
        viewModel.suggestInfo.location!.longitude);
    //搜索状态改为选择状态
    viewModel.isSearch = false;
    notifyChanges();
  }
}

状态管理自定义的变量

import 'package:flutter/cupertino.dart';
import 'package:flutter_baidu_mapapi_map/flutter_baidu_mapapi_map.dart';
import 'package:flutter_baidu_mapapi_search/flutter_baidu_mapapi_search.dart';
import 'package:zuguantong/yuchuangbase/base/base_view_model.dart';
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart';

class MapChooseViewModel extends BaseViewModel {
  //搜索textfield的控制
  TextEditingController searchController = TextEditingController();
  //poi信息列表
  List<BMFPoiInfo> poiList = [];
  //搜索提示列表
  List<BMFSuggestionInfo> suggestList = [];
  //选中的搜索提示信息
  late BMFSuggestionInfo suggestInfo;
  //地图缩放等级
  int mapLevel = 12;
  //选中的位置信息
  late BMFPoiInfo poiInfo;
  //当前是否是搜索的状态
  bool isSearch = false;
  //临时选中的位置名称
  String poiChooseName = "";
  //地图默认的坐标（北京天安门）
  double lat = 39.917215;
  double lon = 116.380341;
  String x = "徐工225H摊铺机";
  //下面白色区域的高度
  double contentHieght = 350;
  //地图控制器
  late BMFMapController mapController;
  //地图初始化时候的Options
  late BMFMapOptions mapOptions = BMFMapOptions(
      center: BMFCoordinate(lat, lon),
      zoomLevel: 12,
      mapPadding: BMFEdgeInsets(left: 30, top: 0, right: 30, bottom: 0));
}

主要就是里面的几个核心的方法，我都抽离出来单独讲了，大家有问题可以留言交流，有错欢迎指正，感谢！！！

天锁卍斩月
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Flutter 仿微信长按发送语音
09-04
引用 package： 文件路径：path_provider 录制与振幅：audio_waveforms
flutter百度地图定位, poi检索功能
xtyzmnchen的博客
08-15 2592
/ 请在主工程的Manifest文件里设置，详细配置方法请参考官网(https://lbsyun.baidu.com/)demo。四、设置定位参数(安卓可以, 但iOS设置之后百度无法回调定位信息, 暂时没法解决)// 可选，设置场景定位参数，包括签到场景、运动场景、出行场景。horizontalAccuracy: 5, // 水平精确度。coordinate: coordinate, // 经纬度。// 如果设置为0，则代表单次定位，即仅定位一次，默认为0。......
Flutter集成百度地图-Android集成
Yumito的博客
07-07 4905
flutter Android 集成百度地图 踩坑攻略
推荐一款Flutter位置选择器：Flutter Place Picker
最新发布
gitblog_00087的博客
06-10 353
推荐一款Flutter位置选择器：Flutter Place Picker 项目地址:https://gitcode.com/blackmann/locationpicker 在开发移动应用时，集成地理位置功能是常见的需求之一。而寻找一个简单易用、主题定制且支持多语言的解决方案并非易事。今天，我们有幸向您推荐一个名为Flutter Place Picker的开源项目。这个项目正是为了填补这一空白，...
百度地图flutter 地图demo使用（超详细教程）
D2461798571的博客
09-06 1792
在经历过无数次报错后，痛定思动，决定照着官方demo一点一点扣，终于跑通了demo。jdk 1.8。
flutter实战 -- 百度地图
weixin_53468073的博客
03-29 1760
1-申请百度地图key 2-创建地图
Flutter开发百度地图，踩坑无数，保姆级教程（1）
热门推荐
o__o__o__o的博客
09-11 1万+
最近在用flutter开发百度地图，踩坑无数，可以说把能踩的坑都踩了一遍，特此记录下辛酸经历。官网里面把基本都把步骤写了，但是里面有很多不明确的点。刚接触到的人可能会不知道某些文件具体添加到哪里，代码添加也有可能出现问题。下面我将安装官网的例程步骤，一步一步进行配置。配置完成之后，一定是可以完美运行的。 一、引入flutter插件 二、 新建一个自定义的Application 三、混淆配置 四、AK配置（秘钥配置） 五、显示地图 六、最终效果图 遇到的其他问题 总结
Flutter - APP跳转高德、百度、腾讯、谷歌地图
iotjin的专栏
10-20 2701
这里介绍的是不需要自己开发地图，直接通过给定的经纬度，跳转到三方地图APP调用导航的方式一种是写的工具类，一种是通过调用三方库实现的官方文档：跳转高德导航 - 路径规划跳转高德导航跳转百度导航 - 路径规划跳转腾讯导航。
android百度地图嵌入flutter demo
05-09
在Android应用开发中，将百度地图嵌入Flutter项目可以实现高效、流畅的地图功能。Flutter作为一个跨平台的开发框架，能够快速构建美观的应用程序，但有时需要与原生平台的组件进行交互，例如集成百度地图。本示例...
flutter高仿微信项目实战
06-11
Flutter案例视频教程，从入门到具体项目实战，Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生...flutter高仿微信项目实战是一个使用flutter技术仿微信界面开发的完整案例,同时提供代码下载。
Flutter地图插件支持Android,iOS 百度、高德地图导航
11-06
Flutter 百度地图、高德地图、导航、线路查询； 实现逻辑： 1）封装android,ios 地图组件库。 2）将组件生成aar包； 3）引入flutter工程项目中，通过channel 调用。 1）引入项目时，注册要修改key和包名，ios 引入时...
flutter_plugin_record:flutter 仿微信录制语音功能 支持android和ios
05-02
使用Flutter实现 仿微信录音的插件 插件支持android 和IOS 插件提供的功能 录制 录制语音, 播放录音, 录制声音大小的监听 提供录制时长的监听 提供类似微信的录制组件 提供播放音频结束的监听 提供根据传递的路径...
flutter接入百度地图
weixin_43819010的博客
12-19 944
flutter接入百度地图详细步骤
Flutter 高德定位 permission_handler + amap_flutter_location 单例封装
tangzhengdz的博客
10-16 1023
最近Flutter开发需要用到定位，使用高德定位（amap_flutter_location）。 在pubspec.yaml文件配置 dependencies: amap_flutter_location: ^2.0.0 Android、Ios 申请高德地图key(这里不做多说,按照高德官方配置就行)集成高德定位Flutter插件-定位Flutter插件-开发指南-Flutter插件 | 高德地图API 注意点，Android 还需要在 build.gradl...
几行代码轻松实现flutter 调用百度地图
qq_30519365的博客
11-08 1427
【代码】几行代码轻松实现flutter 调用百度地图。
Flutter开发百度地图之定位，保姆级教程（2）
o__o__o__o的博客
09-17 6113
前几天开发flutter百度地图，总算是把第一步走通了，这几天把定位功能开发了一下。记录一下，所谓取之于CSDN用之于CSDN。 下面描述的工程是配置Android的，ios并没有配置。 开发环境：sdk: “>=2.12.0 < 3.0.0” Android Studio版本3.4.0
Android集成高德Flutter地图（三）定位
wz_1992的博客
10-10 4176
高德地图定位Flutter实现
Flutter开发 -flutter百度地图接入指南，外加定位，反地理编码，这些功能组成一个类似饿了么的配送员配送界面，这些功能你心动么？
CodingFire的博客
04-13 1313
今天这篇博客说的是地图和定位的问题，不一样的是，这是在flutter中处理地图，定位，反地理编码。 先看下做出来的效果如何： 目前用到的都是模拟数据，真实场景大家自己接入数据即可。 这里的功能分为几部分： 1.百度地图； 2.定位功能；（百度地图提供了定位功能，需要单独引入，但是这里选择使用其他的基于LBS的定位） 3.反地理编码； 4.抽屉功能；（就是这个可以拖拽的列表，可展开，可折叠） 5.滑动按钮。 然后我们来一步步说明怎么来使用这些功能： 1.百度地图 百度地图flutter插件接入地址：htt
flutter实现百度地图发送类似微信定位功能
05-17
要实现类似微信发送定位的功能，你需要使用百度地图提供的 SDK。在 Flutter 中，你可以使用 `flutter_baidu_mapapi_sdk` 插件来使用百度地图 SDK。 下面是实现类似微信发送定位的步骤： 1. 引入插件 在 `pubspec.yaml` 文件中添加 `flutter_baidu_mapapi_sdk` 插件依赖： ```yaml dependencies: flutter_baidu_mapapi_sdk: ^latest_version ``` 2. 初始化地图 在需要使用地图的页面中初始化地图，可以使用 `BaiduMapController` 控制地图： ```dart import 'package:flutter_baidu_mapapi_sdk/flutter_baidu_mapapi_sdk.dart'; class MapPage extends StatefulWidget { @override _MapPageState createState() => _MapPageState(); } class _MapPageState extends State<MapPage> { BaiduMapController _controller; @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [ BaiduMap( onMapCreated: (controller) { _controller = controller; }, initialCameraPosition: CameraPosition( target: LatLng(39.915, 116.404), zoom: 11, ), ), ], ), ); } } ``` 3. 添加定位按钮 在页面中添加一个定位按钮，当用户点击按钮时，获取当前位置信息并显示在地图上： ```dart import 'package:location/location.dart'; class _MapPageState extends State<MapPage> { ... final _location = Location(); void _getCurrentLocation() async { final locationData = await _location.getLocation(); final latLng = LatLng(locationData.latitude, locationData.longitude); _controller.animateCamera(CameraUpdate.newLatLng(latLng)); _controller.addMarker(MarkerOptions( position: latLng, icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed), )); } @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [ BaiduMap( onMapCreated: (controller) { _controller = controller; }, initialCameraPosition: CameraPosition( target: LatLng(39.915, 116.404), zoom: 11, ), ), Positioned( bottom: 16, right: 16, child: FloatingActionButton( onPressed: _getCurrentLocation, child: Icon(Icons.location_on), ), ), ], ), ); } } ``` 4. 获取地址信息 通过百度地图提供的 `ReverseGeoCodeSearch` 类，可以根据经纬度获取地址信息： ```dart import 'package:flutter_baidu_mapapi_sdk/flutter_baidu_mapapi_sdk.dart'; class _MapPageState extends State<MapPage> { ... final _location = Location(); final _search = ReverseGeoCodeSearch(); void _getCurrentLocation() async { final locationData = await _location.getLocation(); final latLng = LatLng(locationData.latitude, locationData.longitude); _controller.animateCamera(CameraUpdate.newLatLng(latLng)); _controller.addMarker(MarkerOptions( position: latLng, icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed), )); _search.reverseGeoCode( ReverseGeoCodeOption( location: latLng, ), onGetReverseGeoCodeResult: (result) { final address = result.address; print(address); }, ); } ... } ``` 5. 发送位置信息 最后，你可以通过你的应用程序向服务器发送位置信息，实现类似微信发送位置的功能。 以上就是实现类似微信发送定位的步骤，你可以根据你的具体需求进行修改。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值