前言：想完成美团一样的自定义地图组件吗要软件和美团一样丝滑吗要工资和美团一样高吗在是白天，你想做白日梦吗家好，我是阿T。又过了一周，这次主要是使用高德地图SDK实现了自定义的地图，为啥要做这个呢，因为 上关于Flutter的地图处理文章实在是太少了，更不要说是自定义地图了，然后官 文档又太简略，害，说多了都是泪，于是我付出了少陪女朋友5天的时间，把这篇文章写了出来！！
源码在文章最后，一步一步按照文章来运行肯定可以??
先上效果图：
还有其他很多小功能就不展示了，大家可以自己运行看看~
1.测试代码需要使用真机，模拟器无法加载地图（可以定位，但是无法加载地图，可能与版本有关）
正文:
1.在高德的开发者平台申请key:
第一步：注册开发者账
高德开发者地址：https://console.amap.com/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qVPEBatj-1634367342850)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/064bfdfa0e09449ca5c3c6db2f55ebe8~tplv-k3u1fbpfcp-watermark.image]
第二步：创建新的应用，并申请key
第四步获取到key:
**第二步：**添加自己刚刚申请的key，添加开发详细定位
第三步：配置一些key.jks
如何生成key.jks在这一篇文章里
生成完后创建一个key.properties
然后在app文件夹下的build.gradle中使用：
先找到key.properties
然后在signingConfigs下引用：
第四步:导入地图
仍在app文件夹下的build.gradle中
并在buildTypes下添加一下两行：
这样就配置好了~
3.加载高德地图
接下来的部分为代码实现部分，只展示核心代码??
第一步：加载自定义地图的样式
第二步：定义地图
第三步：点击切换为自定义地图
5.让外卖小哥飞起来
第一步：获取自定义的图片
有三种方式：
第一种：
第二种：
第三种（最简单的一种）：
第二步：根据x,y轴计算图片要显示的位置
这样就可以将外卖小哥展示到地图上了，还有一些其他的小功能
修改图片的位置：
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(() { _
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！