为了让外卖小哥在地图上开上火箭我用FLutter自定义了地图

前言：想完成美团一样的自定义地图组件吗要软件和美团一样丝滑吗要工资和美团一样高吗在是白天，你想做白日梦吗家好，我是阿T。又过了一周，这次主要是使用高德地图SDK实现了自定义的地图，为啥要做这个呢，因为网上关于Flutter的地图处理文章实在是太少了，更不要说是自定义地图了，然后官网文档又太简略，害，说多了都是泪，于是我付出了少陪女朋友5天的时间，把这篇文章写了出来！！

源码在文章最后，一步一步按照文章来运行肯定可以??

先上效果图：

还有其他很多小功能就不展示了，大家可以自己运行看看~

阅读本文的注意点：

1.测试代码需要使用真机，模拟器无法加载地图（可以定位，但是无法加载地图，可能与版本有关）

2.本文使用的插件：

正文:

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进行处理,非常感谢！