【Flutter】使用高德地图实现地图选点以及地图搜索

效果

插件安装以及环境配置

是使用amap_all_fluttify插件来完成的高德地图的集成

根据官方的说明，这个插件集成了amap_search_fluttify,amap_location_fluttify,amap_map_fluttify.这些插件。

安装amap_all_fluttify 插件后，还需要根据每个插件进行配置。

例如amap_search_fluttify

按照官方文档进行配置即可。

之后就可以尝试进行运行，但是这时会出现一个报错：

Error:The number of method references in a .dex file cannot exceed 64K.

我才用的解决办法才用的是 https://blog.csdn.net/nakajimafn/article/details/82668793 这个链接对应的第二个方法。

代码编写

文档结构

main.dart

import 'package:flutter/material.dart';
import 'package:amap_all_fluttify/amap_all_fluttify.dart';import 'components/map_choicePoint.dart';Future<void> main() async {runApp(MyApp());//地图基本功能-注册高德keyawait AmapService.init(androidKey: '');
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'AMAP_Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'AMAP_Demo'),);}
}class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: MapChoicePoint((point) {debugPrint(point.toString());})),);}
}

map_choicePoint.dart

import 'package:flutter/material.dart';
import 'package:amap_all_fluttify/amap_all_fluttify.dart';
import 'package:decorated_flutter/decorated_flutter.dart';
import 'package:flutter/services.dart';
import 'package:permission_handler/permission_handler.dart';/*** 地图选择点控件*/
class MapChoicePoint extends StatefulWidget {/*** 选择点后回调事件*/final Function onChoicePoint;MapChoicePoint(this.onChoicePoint);@override_MapChoicePointState createState() => _MapChoicePointState();
}class _MapChoicePointState extends State<MapChoicePoint>with SingleTickerProviderStateMixin {//----属性----//地图控制器AmapController _amapController;//选择的点Marker _markerSelect;//搜索出来之后选择的点Marker _markerSeached;//所在城市String city;//搜索框文字控制器TextEditingController _serachController;//自定义marker点图标图片路径Uri _imgUri = Uri.parse('images/position.png');//----方法----/*** 获取权限*/Future<bool> _requestPermission() async {final permissions = await PermissionHandler().requestPermissions([PermissionGroup.location]);if (permissions[PermissionGroup.location] == PermissionStatus.granted) {return true;} else {toast('需要定位权限!');return false;}}/*** 根据搜索条件选出想要的点*/Future _openModalBottomSheet() async {//收起键盘FocusScope.of(context).requestFocus(FocusNode());//根据关键字及城市进行搜索final poiList = await AmapSearch.searchKeyword(_serachController.text,city: city,);List<Map> points = [];//便利拼接信息for (var item in poiList) {points.add({'title': await item.title,'address': await item.adName + await item.address,'position': await item.latLng,});}//弹出底部对话框并等待选择final option = await showModalBottomSheet(context: context,builder: (BuildContext context) {return points.length > 0? ListView.builder(itemCount: points.length,itemBuilder: (BuildContext itemContext, int i) {return ListTile(title: Text(points[i]['title']),subtitle: Text(points[i]['address']),onTap: () {Navigator.pop(context, points[i]);},);},): Container(alignment: Alignment.center,padding: EdgeInsets.all(40),child: Text('暂无数据'));});if (option != null) {LatLng selectlatlng = option['position'];//将地图中心点移动到选择的点_amapController.setCenterCoordinate(selectlatlng.latitude, selectlatlng.longitude);//删除原来地图上搜索出来的点if (_markerSeached != null) {_markerSeached.remove();}//将搜索出来的点显示在界面上 --此处不能使用自定义图标的marker，使用会报错，至今也没有解决_markerSeached = await _amapController.addMarker(MarkerOption(latLng: selectlatlng,));}}@overridevoid initState() {super.initState();_serachController = TextEditingController();}@overridevoid dispose() {super.dispose();}@overrideWidget build(BuildContext context) {return Stack(alignment: AlignmentDirectional.topCenter,children: <Widget>[AmapView(// 地图类型 (可选)mapType: MapType.Standard,// 是否显示缩放控件 (可选)showZoomControl: true,// 是否显示指南针控件 (可选)showCompass: false,// 是否显示比例尺控件 (可选)showScaleControl: true,// 是否使能缩放手势 (可选)zoomGesturesEnabled: true,// 是否使能滚动手势 (可选)scrollGesturesEnabled: true,// 是否使能旋转手势 (可选)rotateGestureEnabled: false,// 是否使能倾斜手势 (可选)tiltGestureEnabled: false,// 缩放级别 (可选)zoomLevel: 16,// 中心点坐标 (可选)// centerCoordinate: LatLng(39, 116),// 标记 (可选)markers: <MarkerOption>[],// 标识点击回调 (可选)onMarkerClicked: (Marker marker) async {if (_markerSeached == null) {return;}//获取点击点的位置var location = await marker.location;var lon = location.longitude;var lat = location.latitude;//获取搜索点的位置var slocation = await _markerSeached.location;var slon = slocation.longitude;var slat = slocation.latitude;//比较位置if (lon == slon && lat == slat) {//移除原来的点if (_markerSeached != null) {_markerSeached.remove();}if (_markerSelect != null) {_markerSelect.remove();}//画上新的点_markerSelect = await _amapController.addMarker(MarkerOption(latLng: location,iconUri: _imgUri,imageConfig: createLocalImageConfiguration(context),width: 64,height: 64,anchorV: 0.7,anchorU: 0.5));}},// 地图点击回调 (可选)onMapClicked: (LatLng coord) async {if (_amapController != null) {//移除原来的点if (_markerSelect != null) {_markerSelect.remove();}if (_markerSeached != null) {_markerSeached.remove();}//画上新的点_markerSelect = await _amapController.addMarker(MarkerOption(latLng: coord,iconUri: _imgUri,imageConfig: createLocalImageConfiguration(context),width: 64,height: 64,anchorV: 0.7,anchorU: 0.5));widget.onChoicePoint(coord);}},onMapMoveStart: (MapMove move) {},// 地图创建完成回调 (可选)onMapCreated: (controller) async {_amapController = controller;//申请权限if (await _requestPermission()) {//获取所在城市final location = await AmapLocation.fetchLocation();        city = await location.city;//显示自己的定位await controller.showMyLocation(MyLocationOption(show: true));// await initSerach();}},),Container(margin: EdgeInsets.all(20),width: MediaQuery.of(context).size.width,height: 46,decoration: BoxDecoration(color: Colors.white),child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[Container(padding: EdgeInsets.all(8),width: MediaQuery.of(context).size.width - 20 - 80,child: TextField(controller: _serachController,decoration: InputDecoration(border: InputBorder.none),inputFormatters: <TextInputFormatter>[LengthLimitingTextInputFormatter(10) //限制长度],),),IconButton(icon: Icon(Icons.search), onPressed: _openModalBottomSheet)],),)],);}
}

【Flutter】使用高德地图实现地图选点以及地图搜索相关推荐

flutter集成高德地图获取位置
flutter集成高德地图获取位置准备工作在创建安卓应用获取SHA1 获取当前位置添加依赖文件配置 build.gradle文件配置 AndroidManifest.xml配置获取定位准 ...
flutter 使用高德地图选取位置
使用了两个官方插件: amap_flutter_map | Flutter Package amap_flutter_location | Flutter Package #高德定位 amap_flu ...
flutter引入高德地图_玩玩Flutter Web —— 实现高德地图插件
Red Deer 1.啰嗦几句去年写了一个功能简单的高德地图插件给flutter_deer使用,当时支持了Android与iOS两端.前一阵子有一个issue问是否会支持Flutter Web,当时 ...
仿滴滴打车地图选点(包含地图选点，离线地图，导航路线)
根据项目的需要今天做一个百度地图得功能: 百度地图API使用详解 1.百度地图状态改变监听,用户拖动地图(可以设置只能在半径范围内活动)可以实时展示经纬度 2.接入全国各省市离线 ...
【iOS】调起地图进行导航（系统地图、高德、百度）
主要代码: 1,调用iOS系统的apple map 1.1 首先添加相对应的库MapKit.framework 1.2 然后导入头文件 #import <MapKit/MapKit.h> ...
高德地图很详细的用法定位搜索添加小蓝点marker 移动地图实时定位
最近项目中需要用到地图的功能,看了下需求后,不多想,直接锁定高德地图,为什么不选择百度地图呢,这里本人觉得高德地图的文档让我看起来更爽,哈哈哈,进入主题吧前题的申请key这里我就不讲啦,很简单,直接 ...
【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
java高德地图api开发平台_【高德地图API】从零开始学高德JS API（一）地图展现...
摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合m ...
高德地图使用心得，百度地图使用心得
1.环境配置高德开发定位,地图,搜索,加覆盖物,这四个功能只需要要做三部第一,下载三个架包,高德里面不涉及到3d地图没有.so文件,只需要三个架包,对于我们不需要的功能其他架包可以不用下载,比如不 ...