本文已参与「[掘力星计划](https://juejin.cn/post/7012210233804079141/ "https://juejin.cn/post/7012210233804079141/")」，赢取创作大礼包，挑战创作激励金。 ### 前言：想完成美团一样的自定义地图组件吗？想要软件和美团一样丝滑吗？想要工资和美团一样高吗？现在是白天，你想做白日梦吗？大家好，我是阿T。又过了一周，这次主要是使用高德地图SDK实现了自定义的地图，为啥要做这个呢，因为网上关于Flutter的地图处理文章实在是太少了，更不要说是自定义地图了，然后官网文档又太简略，害，说多了都是泪，于是我付出了少陪女朋友5天的时间，把这篇文章写了出来！！ ### 先上效果图： ![效果图.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c88d7439a5c4492290bcf64056b41953~tplv-k3u1fbpfcp-watermark.image?) ![296f9859ab5197057fee20f19a92e9a.jpg](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/857dbb2ce3294fb68d9f4f69498e994f~tplv-k3u1fbpfcp-watermark.image?) 还有其他很多小功能就不展示了，大家可以自己运行看看~ ### 阅读本文的注意点： 1.测试代码需要使用真机，模拟器无法加载地图（可以定位，但是无法加载地图，可能与版本有关） 2.本文使用的插件： ```yaml permission_handler: ^8.1.4 #权限管理 amap_flutter_map: 2.0.2 #高德地图 ``` ### 正文: #### 1.在高德的开发者平台申请key: **第一步：注册开发者账号** 高德开发者地址：https://console.amap.com/ ![申请1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/064bfdfa0e09449ca5c3c6db2f55ebe8~tplv-k3u1fbpfcp-watermark.image?) **第二步：创建新的应用，并申请key** ![申请key.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/95a819da443c41b783dc220ff9013727~tplv-k3u1fbpfcp-watermark.image?) **第三步：** ![申请3.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03a494769a1341379e96400c64501c12~tplv-k3u1fbpfcp-watermark.image?) 关于如何获取SHA1，以及处理高德定位使用中的报错在这篇文章里（下一篇文章，还在努力码字😭，给个赞吧） **第四步获取到key:** ![key申请成功.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/694415176c6d4281ac8ea342e83f254e~tplv-k3u1fbpfcp-watermark.image?) #### 2.处理使用高德地图的权限 **第一步：添加定位所需要的权限** ```xml

``` **第二步：**添加自己刚刚申请的key，添加开发详细定位 ``` ``` **第三步：配置一些key.jks** 如何生成key.jks在这一篇文章里生成完后创建一个key.properties ``` storePassword=你自己的密码 keyPassword=你自己的密码 keyAlias=key storeFile=存放的位置（D:\\flutter_gaode_keystore\\key.jks） ``` 然后在app文件夹下的build.gradle中使用：先找到key.properties ``` def keystoreProperties = new Properties() def keystorePropertiesFile = rootProject.file('key.properties') keystoreProperties.load(new FileInputStream(keystorePropertiesFile)) ``` 然后在signingConfigs下引用： ``` signingConfigs { release { keyAlias keystoreProperties['keyAlias'] keyPassword keystoreProperties['keyPassword'] storeFile file(keystoreProperties['storeFile']) storePassword keystoreProperties['storePassword'] } } ``` **第四步:导入地图** 仍在app文件夹下的build.gradle中 ``` dependencies { implementation('com.amap.api:location:5.2.0') implementation 'com.amap.api:3dmap:7.6.0' implementation 'com.amap.api:search:5.0.0' } ``` ``` sourceSets { //添加地图SDK引入路径 main { jniLibs.srcDirs = ['libs'] } } ``` 并在buildTypes下添加一下两行： ``` buildTypes { release { signingConfig signingConfigs.release minifyEnabled false //删除无用代码 shrinkResources false //删除无用资源 } } ``` 这样就配置好了~ #### 3.加载高德地图接下来的部分为代码实现部分，只展示核心代码🐷 ![微信图片_20211016143251.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/419cd17709e24643834136f2e2f02e16~tplv-k3u1fbpfcp-watermark.image?) **第一步：添加申请到的key** ``` class ConstConfig { ///配置申请的apikey，在此处配置之后，可以在初始化[AMapWidget]时，通过`apiKey`属性设置 /// ///注意：使用[AMapWidget]的`apiKey`属性设置的key的优先级高于通过Native配置key的优先级， ///使用[AMapWidget]的`apiKey`属性配置后Native配置的key将失效，请根据实际情况选择使用 static const AMapApiKey amapApiKeys = AMapApiKey( androidKey: '你自己申请的key', iosKey: '没有申请ios的话先填android的key，这样也可以在安卓手机测试'); } ``` **第二步：定义一下地图类型** ```dart //地图类型 MapType _mapType; final Map _radioValueMap = { '普通地图': MapType.normal, '卫星地图': MapType.satellite, '导航地图': MapType.navi, '公交地图': MapType.bus, '黑夜模式': MapType.night, }; ``` **初始化地图：** ```dart @override void initState() { super.initState(); //默认为普通地图 _mapType = MapType.normal; } ``` **创建地图：** ```dart //创建地图 final AMapWidget map = AMapWidget( apiKey: ConstConfig.amapApiKeys, //地图类型属性 mapType: _mapType ?? MapType.normal, ); ``` **第三步：显示地图** ```dart AMapRadioGroup( groupLabel: '地图样式', groupValue: _mapType, radioValueMap: _radioValueMap, onChanged: (value) => { //改变当前地图样式为选中的样式 setState(() { _mapType = value; }) }, ) ``` **第四步：默认地址** ``` //默认显示在北京天安门 static final CameraPosition _kInitialPosition = const CameraPosition( target: LatLng(39.909187, 116.397451), zoom: 10.0, ); ``` #### 4.自定义地图 ![微信图片_202110161432511.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b8e982bbead4bf8b142ea631dc722ba~tplv-k3u1fbpfcp-watermark.image?) **第一步：加载自定义地图的样式** ```dart //用于记录是否为自定义地图 bool _mapCreated = false; //加载自定义地图样式 void _loadCustomData() async { if (null == _customStyleOptions) { _customStyleOptions = CustomStyleOptions(false); } ByteData styleByteData = await rootBundle.load('assets/style.data'); _customStyleOptions.styleData = styleByteData.buffer.asUint8List(); ByteData styleExtraByteData = await rootBundle.load('assets/style_extra.data'); _customStyleOptions.styleExtraData = styleExtraByteData.buffer.asUint8List(); //如果需要加载完成后直接展示自定义地图，可以通过setState修改CustomStyleOptions的enable为true setState(() { _customStyleOptions.enabled = true; }); } ``` **第二步：定义地图** ```dart final AMapWidget map = AMapWidget( apiKey: ConstConfig.amapApiKeys, onMapCreated: onMapCreated, customStyleOptions: _customStyleOptions, ); void onMapCreated(AMapController controller) { if (null != controller) { _mapCreated = true; } } ``` **第三步：点击切换为自定义地图** ```dart AMapSwitchButton( label: Text( '自定义地图', style: TextStyle(color: Colors.white), ), defaultValue: _customStyleOptions.enabled, onSwitchChanged: (value) => { if (_mapCreated) { setState(() { _customStyleOptions.enabled = value; }) } }, ) ``` #### 5.让外卖小哥飞起来 **第一步：获取自定义的图片** 有三种方式：第一种： ``` ///通过BitmapDescriptor.fromAssetImage的方式获取图片 Future _createMarkerImageFromAsset(BuildContext context) async { if (_markerIcon == null) { final ImageConfiguration imageConfiguration = createLocalImageConfiguration(context); BitmapDescriptor.fromAssetImage(imageConfiguration, 'assets/start.png') .then(_updateBitmap); } } ``` 第二种： ```dart ///通过BitmapDescriptor.fromBytes的方式获取图片 Future _createMarkerImageFromBytes(BuildContext context) async { final Completer bitmapIcon = Completer(); final ImageConfiguration config = createLocalImageConfiguration(context); const AssetImage('assets/end.png') .resolve(config) .addListener(ImageStreamListener((ImageInfo image, bool sync) async { final ByteData bytes = await image.image.toByteData(format: ImageByteFormat.png); final BitmapDescriptor bitmap = BitmapDescriptor.fromBytes(bytes.buffer.asUint8List()); bitmapIcon.complete(bitmap); })); bitmapIcon.future.then((value) => _updateBitmap(value)); } ``` 第三种（最简单的一种）： ```dart //最简单的方式 if (null == _markerIcon) { _markerIcon = BitmapDescriptor.fromIconPath('assets/location_marker.png'); } ``` **第二步：根据x,y轴计算图片要显示的位置** ```dart void _changeAnchor() { final Marker marker = _markers[selectedMarkerId]; if (marker == null) { return; } final Offset currentAnchor = marker.anchor; double dx = 0; double dy = 0; if (currentAnchor.dx < 1) { dx = currentAnchor.dx + 0.1; } else { dx = 0; } if (currentAnchor.dy < 1) { dy = currentAnchor.dy + 0.1; } else { dy = 0; } final Offset newAnchor = Offset(dx, dy); setState(() { _markers[selectedMarkerId] = marker.copyWith( anchorParam: newAnchor, ); }); } ``` 这样就可以将外卖小哥展示到地图上了，还有一些其他的小功能 **修改图片的位置**： ```dart void _changePosition() { final Marker marker = _markers[selectedMarkerId]; final LatLng current = marker.position; final Offset offset = Offset( mapCenter.latitude - current.latitude, mapCenter.longitude - current.longitude, ); setState(() { _markers[selectedMarkerId] = marker.copyWith( positionParam: LatLng( mapCenter.latitude + offset.dy, mapCenter.longitude + offset.dx, ), ); }); } Future _changeAlpha() async { final Marker marker = _markers[selectedMarkerId]; final double current = marker.alpha; setState(() { _markers[selectedMarkerId] = marker.copyWith( alphaParam: current < 0.1 ? 1.0 : current * 0.75, ); }); } ``` **修改图片的角度：** ```dart Future _changeRotation() async { final Marker marker = _markers[selectedMarkerId]; final double current = marker.rotation; setState(() { _markers[selectedMarkerId] = marker.copyWith( rotationParam: current == 330.0 ? 0.0 : current + 30.0, ); }); } ``` #### 6.添加多个图标在地图上 **1.定义marker** ```dart static final LatLng mapCenter = const LatLng(39.909187, 116.397451); //需要先设置一个空的map赋值给AMapWidget的markers，否则后续无法添加marker final Map _initMarkerMap = {}; ``` **2.增加marker** 添加一个： ```dart void _addMarker() { final _markerPosition = LatLng(_currentLatLng.latitude, _currentLatLng.longitude + 2 / 1000); final Marker marker = Marker( position: _markerPosition, //使用默认hue的方式设置Marker的图标 icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueOrange), ); //调用setState触发AMapWidget的更新，从而完成marker的添加 setState(() { _currentLatLng = _markerPosition; //将新的marker添加到map里 _markers[marker.id] = marker; }); } ``` 添加多个： ```dart for(int i=0; i< 10; i++) { LatLng position = LatLng( mapCenter.latitude + sin(i * pi / 12.0) / 20.0, mapCenter.longitude + cos(i * pi / 12.0) / 20.0); Marker marker = Marker(position: position); _initMarkerMap[marker.id] = marker; } ``` #### 7.辅助工具toast 封装了一个toast，通过OverlayEntry添加到屏幕上显示它的核心代码： ```dart if (_overlayEntry == null) { //OverlayEntry负责构建布局 //通过OverlayEntry将构建的布局插入到整个布局的最上层 _overlayEntry = OverlayEntry( builder: (BuildContext context) => Positioned( //top值，可以改变这个值来改变toast在屏幕中的位置 top: buildToastPosition(context), child: Container( alignment: Alignment.center, width: MediaQuery.of(context).size.width, child: Padding( padding: EdgeInsets.symmetric(horizontal: 40.0), child: AnimatedOpacity( opacity: _showing ? 1.0 : 0.0, //目标透明度 duration: _showing ? Duration(milliseconds: 100) : Duration(milliseconds: 400), child: _buildToastWidget(), ), )), )); //插入到整个布局的最上层 overlayState.insert(_overlayEntry); } else { //重新绘制UI，类似setState _overlayEntry.markNeedsBuild(); } ``` 绘制核心代码： ```dart //toast绘制 static _buildToastWidget() { return Center( child: Card( color: _bgColor, child: Padding( padding: EdgeInsets.symmetric( horizontal: _pdHorizontal, vertical: _pdVertical), child: Text( _msg, style: TextStyle( fontSize: _textSize, color: _textColor, ), ), ), ), ); } ``` 设置toast的位置： ```dart // 设置toast位置 static buildToastPosition(context) { var backResult; if (_toastPosition == ToastPostion.top) { backResult = MediaQuery.of(context).size.height * 1 / 4; } else if (_toastPosition == ToastPostion.center) { backResult = MediaQuery.of(context).size.height * 2 / 5; } else { backResult = MediaQuery.of(context).size.height * 3 / 4; } return backResult; } ``` 这样基本功能就讲解完成啦，还有其他功能源代码里都有写到，比如路况显示，限制地图大小等等本文结束了，看到这里的兄弟们给点点赞吧，女朋友已经让我睡家门口了😭 (太长时间没理她怎么哄...)评论区告诉小弟😭 [源代码在这里哦](https://juejin.cn/pin/7034450183706378270)