福州便民自行车地图app(基于百度地图iOS SDK) 一期开发文档

20170226
因项目已准备上线,部分功能已更新。
20170305
(上线中遇到的坑)[http://www.jianshu.com/p/75cbea8f60ed]

榕易骑.png

前言

开发这个app纯粹是为了兴趣和练手。目前没有上线,发出来纯粹是为了可以更好的交流。程序中有很多不成熟的地方,也希望看到的人可以批评指正。

效果图

效果图.gif

百度地图的iOS SDK 及OC sample

  • 示例demo中针对每种功能都有一个单独的XIB及功能描述。
  • 我们需要用到的几个功能包括:
    • 基础的BMKMapView —— 百度地图中,最基础也是最重要的地图类。覆盖物的添加,标注的添加等等的代理回调,都与他相关
    • 区域搜索功能 —— 用于行政区域边界的绘制,绘制区域的覆盖物。
    • 定位功能 —— 用于定位当前位置
    • 路径规划功能 —— 暂时还未用到

框架的搭建

构想

百度地图提供的每一个工具类,都有对应的代理。因为设计的页面(一期)只有一个ViewController,如果将所有的代理实现及功能都放在一起,代码会非常乱。

管理地图的生命周期:自2.0.0起,BMKMapView新增viewWillAppear、viewWillDisappear方法来控制BMKMapView的生命周期,并且在一个时刻只能有一个BMKMapView接受回调消息,因此在使用BMKMapView的viewController中需要在viewWillAppear、viewWillDisappear方法中调用BMKMapView的对应的方法,并处理delegate,代码如下:

(void)viewWillAppear:(BOOL)animated {      
    [_mapView viewWillAppear];      
    _mapView.delegate = self; // 此处记得不用的时候需要置nil,否则影响内存的释放      
}      
-(void)viewWillDisappear:(BOOL)animated {      
        [_mapView viewWillDisappear];      
      _mapView.delegate = nil; // 不用时,置nil      
}

百度工具类的单例实现

  • 根据上述的构想,将定位功能路径规划区域搜索功能都做成单例。在单例的调用中,放入基础的地图类BMKMapView类。单例的初始化可以写为
    [[BaiduLocationTool initInstanceWithMapView:self.BaseBaiduMapView] startLocation];
    // 默认画出鼓楼区的边界,设置district对应的delegate
    [BaiduDistrictTool initInstanceWithMapView:self.BaseBaiduMapView];
  • 设置代理和单例初始化的同时,要开启上述的地图管理生命周期。这里的做法,是用一个广播通知给每个工具类单例,控制各个工具类的代理开关。
    [[NSNotificationCenter defaultCenter] postNotificationName:BAIDU_DELEGATE_CTRL_RADIO
                                                        object:DELEGATE_ON];
  • 工具类的简述及对应方法(图)


    工具类流程图.png

鉴权问题

百度地图鉴权及数据申请顺序逻辑

导航模式

站点导航模式的逻辑说明

框架综述

上述的做法,主要是为了修改代理对应的工具时,便于维护和封装。


页面上类的描述

参考图
  • ViewController —— 整体的控局类。当Overlay(覆盖物)和Annotation(标注)添加入本类的BMKMapView时,会触发相应的代理。
    • MyPinAnnotationView 标注视图类。这里自定义后可以去替换他的背景图。
  • BottomDistrictView —— 底部栏,根据福州五区设置。在选择后会弹出。他包含以下几个subview:
    • tableview显示下部的站点列表
      • 我们的TableViewCell是自定义的Cell,包含三个部分,左侧的区域logo,中间的站点信息和右侧的出发按键(GotoView)
      • GotoView也是一个自定义的XIB,包括一个画好的轮子和一个按键
        自定义cell
    • 区域名按钮 —— DistrictButton,用于选择/切换行政区域。
      选中后,触发以下功能
      • 如果BottomDistrictView未弹出,那么弹出
      • 顶部一共有 6个,本身选中时会发送一个广播,让其他5个按键不处于选中状态(背景图及样式修改)
      • model中取出对应区域的站点信息数组,写入当前的tableview
      • model中取出对应区域的站点信息的经纬度,转化为一个标注数组annotation,通过代理传值发送给ViewController,让主页添加对应标注
      • 通过代理传值,将当前的区域名称发送给ViewController,让主页添加覆盖物overlays

数据的存储

app中有两种数据需要交互。

  • 站点信息,包括 站点名,所属行政区域,站点地址,站点的经纬度。
  • 行政区域边界的坐标。

站点信息

将站点信息存储成JSON格式,调试中的测试需要,将数据放至七牛云存储。获取一个URL.

  • 经纬度
    因并没有办法获取到完整的站点的经纬度列表,demo中用到的是自己写死的固定数据。在主页上添加一个tapGestureRecongnizer返回点击后的经纬度进行测试。如下:
-(IBAction)fetchPoitCoordiate:(UITapGestureRecognizer *)sender {
    CGPoint point = [sender locationInView:self.BaseBaiduMapView];
    CLLocationCoordinate2D coo = [self.BaseBaiduMapView convertPoint:point toCoordinateFromView:self.BaseBaiduMapView];
    NSLog(@"经纬度:%lf, %lf", coo.longitude,  coo.latitude);
}

申请到的数据返回后,采用MJExtension作转化。因Xcode 8禁止了插件,所以我们无法使用JSONFormatt作快速转化。推荐使用一个第三方开发者写的mac appWHC_DataModelFactory,支持OCSwift

app icon

站点信息的类,包含有以下的方法。


stationinfo class

行政区域边界

百度地图SDK中,行政区域的绘制是通过覆盖物来完成的。

  • 一般而言,这个数据不会经常变动,我这里采用的是将五个行政区域的边界,用plist存储成一个键值对。
    行政区域边界说明.png
  • 专门写了一个plistManager类来管理plist在沙盒中的存储。若读出的字典为空或对应路径的文件不存在,就调用BaiduMapTool类搜索边界数据,然后创建一个。
  • 拿到坐标信息后,去调用BaiduMapTool类中对应的方法,产生一个覆盖物对象。BaiduMapTool类中有一个接口
@property (nonatomic,strong) NSMutableDictionary *districtPolyganDict; //存放区域overlay的字典

键值对为: 区域名称 -> 覆盖物.
将刚才获取到的覆盖物对象存入到对应的区域下。等待调用。
需要注意的是,按键在调用“全市”这个需求的时候,我们需要的是将五个区的覆盖物拼接在一起,因此整个字典的分布为:

xx区 -> 对应覆盖物对象
xx区 -> 对应覆盖物对象
...
全市 -> 上述覆盖物对象组成的数组


主页和底部栏之间的数据交互方式

本应用的设想是:
主页和底部栏之间,通过代理交互数据,以下简称主页为A,底部栏View为B


示意图
  • 主页和底部栏之间的数据交互顺序,其实分别遵循下图的左右两个部分。
    但是特别容易忽略的一点是,假设我们从A发起,一直执行到最后一条,选中了B的cell,那么B会继续循环执行右边的操作,造成这个过程一直在死循环。解决的方式是,在发送代理通知时,在各自的类中添加标志位,判断是手势出发的选中,还是传值执行代理时代码触发的选中。
    ![Uploading CD7983B696EFC3FC3A5C8846F9BD4CA9_264088.gif . . .]


    交互代理示意图.png

还未完成的部分及疑问

  • 顶部栏的路径规划/搜索功能,设置功能,包括更新数据,设置偏好等。
  • 判断当前的位置是否处于五区内,若处于,显示当前位置半径xx公里内的自行车站点作为“附近站点”
  • 便民自行车官网上,可以观察到目前福州全市150多个站点的地理位置标注以及信息。在我打开网页的前端源代码时可以清楚的看到坐标点的信息。那么是否有办法通过搭建一个自己的前端,去“福州便民自行车”官网上爬取他相应的信息,生成json信息。这样我们的数据就不是死的固定数据,而是有一个前端逻辑做索引。

Many thanks.
2017.1.15

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 各位小伙伴们大家好,今天我向大家介绍一下苹果百度地图的使用方法,因为做过一些想关的APP,感觉百度地图还是挺方便的...
    Lee0528阅读 14,648评论 18 46
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,387评论 25 707
  • 恩,越来越像男女朋友了,开心
    雪梨啊阅读 137评论 0 0
  • 通过appearance统一设置所有UITabBarItem的文字属性NSMutableDictionary *a...
    yzu阅读 416评论 0 0