Flutter笔记-调用原生IOS高德地图sdk

2017年底因公司业务组合部门调整，新的团队部分维护的项目用React Native技术混合开发。为适应环境变化，开启疯狂RN学习之旅，晚上回来啃资料看视频。可能由于本身对RN技术体验不感冒或者在环境之下强迫学习有点不爽。开始寻找代替方案，Fluter像一束曙光引起了我的注意，之后一直关注并利用闲余时间开始探索。2018年一直学习到使用Flutter写项目，从0.2.0开始到现在1.5版本的发布，终于开始慢慢的爬出坑位了，但是因为部分控件感觉还是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因项目中严重使用依赖地图，故而做了Fluterr使用原生IOS高德地图调研。因为我本身是一名android开发人员，初学IOS并记录下来。

成都创新互联公司总部坐落于成都市区，致力网站建设服务有网站设计制作、网站设计、网络营销策划、网页设计、网站维护、公众号搭建、重庆小程序开发、软件开发等为企业提供一整套的信息化建设解决方案。创造真正意义上的网站建设，为互联网品牌在互动行销领域创造价值而不懈努力！

PlatformView是 flutter 官方提供的一个可以嵌入 Android 和 iOS 平台原生 view 的小部件。

在我们实际开发中，我们遇到一些 flutter 官方没有提供的插件可以自己创建编写插件来实现部分功能，但是原生View在 flutter 中会遮挡住flutter 中的小部件，比如你想使用高德地图sdk、视频播放器、直播等原生控件，就无法很好的与 flutter 项目结合。

1、info.plist文件设置

2、 ios 端实现原生组件PlatformView提供原生view

3 、ios 端创建PlatformViewFactory用于生成PlatformView

4、 ios 端创建FlutterPlugin用于注册原生组件

5 、flutter 平台嵌入 原生view

iOS端的UiKitView目前还只是preview状态, 默认是不支持的, 需要手动打开开关, 在info.plist文件中新增一行io.flutter.embedded_views_preview为true.

创建类 FlutterMapView 并实现FlutterPlatformView 协议

FlutterMapView.h

FlutterMapView.m

FlutterMapFactory.h

FlutterMapFactory.m

FlutterMapPlugin.h

FlutterMapPlugin.m

请前往 高德开放平台控制台 申请 iOS Key。

注意：Bundle Identifier需要与申请的时候填写的一致

地图依赖的库列举如下：

基础 SDK AMapFoundationKit.framework

第一步：将解压后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夹中，左侧目录选中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中点击“+”按钮，在弹出的窗口中点击“Add Other”按钮，选择工程目录下的 MAMapKit.framework 文件添加到工程中。

千万不要忘记将AMapFoundationKit也一起加入工程。

3D地图正确配置应如下图所示：

需要引入的资源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle资源文件中存储了定位、默认大头针标注视图等图片，可利用这些资源图片进行开发。

左侧目录中选中工程名，在右键菜单中选择Add Files to “工程名”…，从MAMapKit.framework中选择AMap.bundle文件，并勾选“Copy items if needed”复选框，单击“Add”按钮，将资源文件添加到工程中。

成功跑起来 。。 。

React-Native-IOS使用高德地图

在github上找了好几个使用React Native封装基于ios的高德地图的依赖，但是大多数依赖无论手动连接还是自动连接都会有报错，个人感觉最大的可能就是不兼容现在的react-native^0.42.0，最后找到两个可以在IOS上显示的高德地图依赖和一个可以定位的依赖。

可以显示高德地图，配置过程也非常简单，只需执行如下两个命令，运行时模拟器中地图显示的是英文，真机上地图显示的汉字，但是样式看上去有点奇怪，不知道是不是版本老的原因。

虽然这个依赖显示了高德地图，但是经过这些安装高德地图的试验，我感觉这个依赖很奇怪。（1）没有看到高德地图相关的文件 MAMapKit.framework、AMapFoundationKit.framework、AMapSearchKit.framework ；（2）没有进行高德key值的配置，个人感觉在 react-native-maps/ios/AirMaps/AIRMapManager.m 文件中，31行应该是输入高德key值的地方。

在ios上，可以按照说明文档进行配置，也就是手动链接。我是先执行 react-native link react-native-smart-amap 进行自动链接，然后再按照说明文件进行配置，需要注意的地方有两点：

这时的运行结果如下图所示，地图上并没有标注出坐标的位置，查了issuse列表看到别也提了这个问题，估计是依赖的问题，我就查了一下依赖的源码，试着找了一下，发现将 react-native-smart-amap/ios/RCTAMap/RCTAMap/RCTAMapManager.m文件中422、423、424行的NO改为YES ，地图上的位置标注就出来了，如下图所示。

以上都是在ios上的配置，在android端也有需要注意的地方。上一篇 React-Native-Android使用高德地图 已经讲了在android上使用高德地图，如果想在android端也使用react-native-smart-amap这个依赖来保持一致的话，需要先将android/setting.gradle、android/app/build.gradle、MainApplication.java中关于react-native-amap-android的配置去掉，然后再按照说明文档配置react-native-smart-amap，否则会报两个错误。

第一个错误如下图所示，解决办法是将gradle.properties文件中被注释的 org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 放开。

第二个错误如下图所示，是由于包冲突，因为已经存在一个高德地图的依赖了，解决办法就是将android/setting.gradle、android/app/build.gradle、MainApplication.java中关于react-native-amap-android的配置去掉，只保留一个高德地图的配置。

而且android也是存在位置标注不显示的问题，需要将 react-native-smart-amap/android/src/main/reactnativecomponent/amap/RCTAMapView.java文件的202行注释放开 ，地图上的位置标注就出来了，如下图所示。

在ios上，还是执行 react-native link react-native-smart-amap-location 进行自动链接，然后再按照说明文件进行配置，只有下面这一条需要注意：

IOS开发中使用高德地图所遇到的问题

解决的办法：A页面生成一个mapView，然后大家共用它，而不是每次点击单元格都创建一个地图。因为A页面和B页面切换速度过快，地图绘制是很耗时间的，地图还没有创建出来就退出，有时候就会导致内存泄露--crash。

iOS App内部调起百度地图、高德地图、腾讯地图

使用: [[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:@"白名单://"]] 判断是否安装白名单里面的App.

苹果自带的地图不需要设置白名单,需要设置终点的经纬度就行,需要导入 #import MapKit/MapKit.h 头文件

可以参考: 百度地图官方文档 实现如下:

参数设置可以参考文档

可以参考: 高德地图官方文档 实现如下:

可以参考: 腾讯地图官方文档 实现如下:

.h

.m

当前名称：ios开发高德地图,ios高德地图实景导航
地址分享：http://chengdu.cdxwcx.cn/article/dsdeiih.html