flutter引入高德地图_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
#import "Flutter/Flutter.h"
NS_ASSUME_NONNULL_BEGIN
@interface FlutterMapView : NSObject
-(instancetype)initWithWithFrame:(CGRect)frame
viewIdentifier:(int64_t)viewId
arguments:(id _Nullable)args
binaryMessenger:(NSObject*)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
#import
NS_ASSUME_NONNULL_BEGIN
@interfaceFlutterMapFactory : NSObject
- (instancetype)initWithMessenger:(NSObject*)messager;
@end
NS_ASSUME_NONNULL_END
FlutterMapFactory.m
#import "FlutterMapFactory.h"
#import "FlutterMapView.h"
@implementationFlutterMapFactory{
NSObject*_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
#import
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.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 文件
NSLocationWhenInUseUsageDescription
定位用来干什么,需要描述清楚
3、添加依赖的库
地图依赖的库列举如下:
第一步:将解压后的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.h头文件……
(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[AMapServices sharedServices].apiKey = @"您的Key";
……
}
5、加载地图
#import "FlutterMapView.h"
#import
#import
@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"), // 设置标识
)
成功跑起来 。。 。
flutter引入高德地图_Flutter笔记-调用原生IOS高德地图sdk相关推荐
- 【高德LBS开源组件大赛】iOS版地图选中Overlay功能组件
2019独角兽企业重金招聘Python工程师标准>>> ##开源组件名称 iOS版地图选中Overlay功能组件 ##开源组件说明及使用场景 提供在iOS版地图中选中Overlay ...
- 百度高德位置定位服务器,调用百度、高德地图App,百度地图网页版,App定位
1.首先判断是否安装了目标地图App //判断是否安装目标应用 public static boolean isInstallByread(String packageName) { return n ...
- Flutter和原生iOS调用相册
文章链接:https://juejin.cn/post/6908232699673722888 目的: 实现一个flutter调用原生ios相册的功能,并传递照片 flutter的操作 flutter ...
- 地图与定位(五)高德地图服务一
序言: 高德地图是一款经常在苹果手机使用的地图平台.在国内iOS的地图服务都是由高德提供的.在上一节中,我们介绍了一下如何使用MapKit框架实现地图服务,以及如何调用了系统内置的地图应用.除了使用i ...
- iOS 高德地图(二)(进阶具体使用的细节)
2019独角兽企业重金招聘Python工程师标准>>> 前面我们配置好了SDK的环境,也在高德的官网中申请了AppKey:de5b39fb2b066ed80c51383bb3a1fe ...
- flutter 调用原生安卓插件_Flutter 如何调用Android和iOS原生代码
分3个大步骤: 1.在flutter中调用原生方法 2.在Android中实现被调用的方法 3.在iOS中实现被调用的方法 在flutter中调用原生方法 场景,这里你希望调用原生方法告诉你一个boo ...
- flutter 调用原生安卓插件_Flutter 如何调用Android和iOS原生代码-阿里云开发者社区...
分3个大步骤: 1.在flutter中调用原生方法 2.在Android中实现被调用的方法 3.在iOS中实现被调用的方法 在flutter中调用原生方法 场景,这里你希望调用原生方法告诉你一个boo ...
- iOS高德地图使用笔记
高德地图笔记 一 准备工作 1.前往高德官网,申请key,http://lbs.amap.com/ 2.导入高德SDK,使用cocopods platform :ios, '7.0' #手机的系统 ...
- vue + 高德原生 API实现地图可视化
vue + 高德原生 API 由于项目需求,需要使用地图定位,最终决定使用 vue + 高德原生API: 当前项目环境 vue2.0+: 创建项目时,如果安装 eslint ,建议关闭eslint语法 ...
最新文章
- Synchronize使用
- Android开发工具之Android Studio-合并主干和分支代码
- 四十、Vue项目上手 | 用户管理系统 实现弹窗,搜索和详细页功能(下篇)
- itms-services 格式
- java中getlast_Java ArrayDeque getLast()用法及代码示例
- C#调用exe工作目录
- VS 提示:请考虑使用 app.config 将程序集“XXX”从版本“XX”重新映射到版本“XX”,以解决冲突并消除警告。...
- 树梅派输入法黑块问题
- Spring基于注解及SpringMVC
- 用 BAT 注册 Subversion 服务
- Android studio 老虎机小游戏
- qgis比例尺级别设置
- 阿里云 HotFix 注意事项
- Problem G: 测量湖泊的平均水深
- 【原创】技术员 Ghost Win 10 X86 企业贺岁版2018
- 【微信网页授权】SpringBoot+uniapp实现网页授权获取用户基本信息
- 在标准ASCII码表中,已知英文字母K的十六进制码值是4B,则二进制ASCII码1001000对应的字符是( )
- 装了4亿篇档案的AI和人辩论谁赢了?IBM最强AI辩手首次登上《自然》封面
- 电车防盗报警器电路原来是这样的!
- 主角得到红云用鸿蒙紫气作的系统,我红云,开局炼化鸿蒙紫气!
热门文章
- 【数论】【Polya定理】poj1286 Necklace of Beads
- Android项目中,在一个数据库里建立多张表
- 构建高性能ASP.NET站点 第六章—性能瓶颈诊断与初步调优(下前篇)—简单的优化...
- SharePoint 2007 SP2 发布
- [原创]性能测试之“Windows性能监视器”
- 大屏难看怎么办?这份大屏制作教程请收好
- 大数据时代,如何做好数字化精益生产?附26页智慧工厂解决方案
- 唐门的竹林伪原创工具
- 屏幕最左上角的 飞秋官方下载 字符
- 【飞秋】OR层代码组织介绍