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

一、前言

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

二、什么是 PlatformView?

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

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

Flutter 中嵌套使用ios原生组件的步骤基本上可以描述为：

1、info.plist文件设置

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

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

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

5 、flutter 平台嵌入原生view

三、制作本地插件

1、info.plist文件设置

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

image.png

2、创建IOS 原生MApView

创建类 FlutterMapView 并实现FlutterPlatformView 协议
FlutterMapView.h

#import <Foundation/Foundation.h>
#import "Flutter/Flutter.h"

NS_ASSUME_NONNULL_BEGIN

@interface FlutterMapView : NSObject <FlutterPlatformView>

-(instancetype)initWithWithFrame:(CGRect)frame
                  viewIdentifier:(int64_t)viewId
                       arguments:(id _Nullable)args
                 binaryMessenger:(NSObject<FlutterBinaryMessenger>*)messenger;
@end

NS_ASSUME_NONNULL_END

FlutterMapView.m

#import "FlutterMapView.h"

@implementationFlutterMapView {

   //FlutterIosTextLabel 创建后的标识
   int64_t_viewId;

   MAMapView*_mapView;

   //消息回调

   FlutterMethodChannel* _channel;

   }

   //在这里只是创建了一个UILabel

   -(instancetype)initWithWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args binaryMessenger:(NSObject *)messenger{

       if([superinit]) {

           ///  创建地图view与展示逻辑
       }
       returnself;
   }

   - (nonnullUIView*)view {

       return_mapView;

   }

@end

3、创建PlatformViewFactory

FlutterMapFactory.h

#import  <Foundation/Foundation.h>

#import  <Flutter/Flutter.h>

NS_ASSUME_NONNULL_BEGIN

@interfaceFlutterMapFactory :  NSObject<FlutterPlatformViewFactory>

- (instancetype)initWithMessenger:(NSObject*)messager;

@end

NS_ASSUME_NONNULL_END

FlutterMapFactory.m

#import "FlutterMapFactory.h"

#import "FlutterMapView.h"

@implementationFlutterMapFactory{

  NSObject<FlutterBinaryMessenger>*_messenger;

}

    - (instancetype)initWithMessenger:(NSObject *)messager{

        self= [superinit];

        if(self) {
            _messenger= messager;

        }
        returnself;

    }

    //设置参数的编码方式

    -(NSObject *)createArgsCodec{

        return [FlutterStandardMessageCodec sharedInstance];

    }

    //用来创建 ios 原生view

    - (nonnullNSObject *)createWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id_Nullable)args {

        //args 为flutter 传过来的参数

        FlutterMapView *mapView = [[FlutterMapView alloc] initWithWithFrame:frame viewIdentifier:viewId arguments:args binaryMessenger:_messenger];

        returnmapView;

    }
@end

4、创建Plugin

FlutterMapPlugin.h

#import <Foundation/Foundation.h>
#import <Flutter/Flutter.h>

NS_ASSUME_NONNULL_BEGIN

@interfaceFlutterMapPlugin :NSObject

@end

NS_ASSUME_NONNULL_END

FlutterMapPlugin.m

#import "FlutterMapPlugin.h"

#import "FlutterMapFactory.h"

@implementationFlutterMapPlugin

+ (void)registerWithRegistrar:(nonnullNSObject *)registrar {

    //注册插件

    //注册 FlutterIosTextLabelFactory

    //com.flutter_to_native_lbs.amap 为flutter 调用此  map 的标识

    [registrarregisterViewFactory:[[FlutterMapFactory alloc] initWithMessenger:registrar.messenger] withId:@"com.flutter_to_native_lbs.amap"];

}
@end

5、AppDelegate 中注册插件

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#include "FlutterNativePlugin.h"
#include "FlutterMapPlugin.h"

#import <AMapFoundationKit/AMapFoundationKit.h>

//需要引入AMapFoundationKit.h头文件

@implementation AppDelegate

- (BOOL)application:(UIApplication*)application

    didFinishLaunchingWithOptions:(NSDictionary*)launchOptions {

  [GeneratedPluginRegistrant registerWithRegistry:self];

  // Override point for customization after application launch.

  [FlutterNativePlugin registerWithRegistrar: [self registrarForPlugin:@"FlutterNativePlugin"]];

   //本地插件 高德地图

   [FlutterMapPlugin registerWithRegistrar:[self registrarForPlugin:@"FlutterMapPlugin"]];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];

}
@end

四、集成IOS高德sdk

1、获取高德Key

请前往高德开放平台控制台申请 iOS Key。
注意：Bundle Identifier需要与申请的时候填写的一致

image

2、配置Info.plist 文件

<key>NSLocationWhenInUseUsageDescription</key>
<string>定位用来干什么，需要描述清楚</string>

3、添加依赖的库

地图依赖的库列举如下：

基础 SDK AMapFoundationKit.framework

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

18808122-52bbb4dcd0aebe6b.png

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

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

image.png

第 2 步：需要引入的资源文件

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

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

image.png

4、配置高德Key至AppDelegate.m文件

#import<AMapFoundationKit/AMapFoundationKit.h>//需要引入AMapFoundationKit.h头文件……

(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{ 

    [AMapServices sharedServices].apiKey = @"您的Key";

    ……
}

5、加载地图 <FlutterMapView.m完整代码>

#import "FlutterMapView.h"
#import  <MAMapKit/MAMapKit.h>
#import  <AMapFoundationKit/AMapFoundationKit.h>

@implementationFlutterMapView {

    //FlutterIosTextLabel 创建后的标识
    int64_t_viewId;

    MAMapView*_mapView;

    //消息回调
    FlutterMethodChannel* _channel;

    }

    //在这里只是创建了一个UILabel

    -(instancetype)initWithWithFrame:(CGRect)frame viewIdentifier:(int64_t)viewId arguments:(id)args binaryMessenger:(NSObject *)messenger{

        if([superinit]) {

            ///地图需要v4.5.0及以上版本才必须要打开此选项（v4.5.0以下版本，需要手动配置info.plist）

            [AMapServices sharedServices].enableHTTPS = YES;


            _mapView= [[MAMapViewalloc]initWithFrame:self.view.bounds];

            _viewId= viewId;

            ///如果您需要进入地图就显示定位小蓝点，则需要下面两行代码

            _mapView.showsUserLocation = YES;

            _mapView.userTrackingMode = MAUserTrackingModeFollow;

            MAUserLocationRepresentation *r = [[MAUserLocationRepresentation alloc] init];

           // r.showsAccuracyRing = NO;///精度圈是否显示，默认YES

            r.strokeColor = [UIColor blueColor];///精度圈 边线颜色, 默认 kAccuracyCircleDefaultColor

            r.fillColor = [UIColor redColor];///精度圈 填充颜色, 默认 kAccuracyCircleDefaultColor

            //r.locationDotBgColor = [UIColor greenColor];///定位点背景色，不设置默认白色

            [_mapView updateUserLocationRepresentation:r];

           // [_mapView setMapType:MAMapTypeStandardNavi];

        }

        returnself;

    }

    - (nonnullUIView*)view {
        return_mapView;
    }
@end

最后一步操作 Flutter调用

 body:Container(
    child:UiKitView(viewType:"com.flutter_to_native_lbs.amap"), // 设置标识 
)

成功跑起来。。。