地图3级显示城市区域,商圈,和具体标注,选择地铁线路查看地铁沿线标注

前言
我们的APP是做房地产类,所以用户有在地图中根据区域,不同商圈,地铁线路站牌来查看楼盘的需求。我们的功能就是在用户进入地图页时按区域显示新楼盘或者二手房数量,用户根据需要点击区域进入二级商圈显示商圈内楼盘数量,用户点击某个商圈进入该商圈内的楼盘位置视图,楼盘标注显示楼盘信息,价格信息,点击楼盘标签进入详情页,功能效果可参考房天下的地图模式。
地铁模式:用户选择地铁线或者站点,在地图上显示地铁线路标注,站点标注。点击某个站点显示附近楼盘标注信息。

52E19613DD831D0961CD1BCBF73442F0.png

![Uploading 33C948F3F2B44F1084ED64A77BA8A4CE_098266.png . . .]


77A19972045653C1B7F2A9C49D980FFE.png
33C948F3F2B44F1084ED64A77BA8A4CE.png
AE5B8A54B4AD60A3A0FAEB1815B85DC9.png
6543E08D6CBAEAE5F86F5995F45B8C60.png

功能实现

1、准备
地图:我们的APP是基于百度地图的
后台:需要分别返回区域,商圈,楼盘的接口。

2、实现
创建自定义的annotationview继承于BMKAnnotationView
创建好对应的model,存储后台返回的数据
刚进入地铁时默认加载区域的标注。
//添加区域标注

-(void)addAreaAnnotation{
    
    [_mapView removeAnnotations:self.mapViewAnnotations];
    
    NSMutableArray *annotations= [NSMutableArray new];
    for (AreaModel *model in self.areaArray) {
        
        AreaAnnotation *areaAnnotation = [AreaAnnotation new];
        areaAnnotation.coordinate = model.location;
        areaAnnotation.areaModel = model;
        [annotations addObject:areaAnnotation];
    }
    
    self.mapViewAnnotations = [annotations copy];
    [_mapView addAnnotations:self.mapViewAnnotations];
}

实现百度地图的代理方法
// 根据anntation生成对应的View

- (BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id <BMKAnnotation>)annotation{
//普通annotation
    if ([annotation isKindOfClass:[AreaAnnotation class]]) {
        
        static NSString *AreaAnnotationViewID = @"AreaAnnotationViewID";
        AreaAnnotationView *annotationView = (AreaAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:AreaAnnotationViewID];
        if (annotationView == nil) {
            annotationView = [[AreaAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:AreaAnnotationViewID];
            annotationView.delegate = self;
        }
        annotationView.titleLabel.text = ((AreaAnnotation *)annotation).areaModel.areaName;
        annotationView.subTitleLabel.text = ((AreaAnnotation *)annotation).areaModel.houseNums;
        return annotationView;
        
    }
}

区域的标注AreaAnnotationView 自定义视图继承于BMKAnnotationView
这样区域的标注就已经加载完成。
下面实现点击区域加载商圈的功能:
这里在区域标注的点击代理里实现

- (void)didSelectAreaAnnotationView:(UIView *)view{
    
    //当当前的选择点移到最前
    UIView *tapDetectingView = view.superview;
    [tapDetectingView bringSubviewToFront:view];
    
    if([view isKindOfClass:[AreaAnnotationView class]]){
        
        if (_isNewhouse) {
            //统计
            [MobClick event:@"searchNewHouseOnMap_bubble_arecaClickEvent"];
        }else {
            //统计
            [MobClick event:@"searchNewHouseOnMap_bubble_houseClickEvent"];
        }
        
        AreaAnnotationView *areaAnnotationView = (AreaAnnotationView *)view;
        AreaAnnotation *annotation= (AreaAnnotation *)areaAnnotationView.annotation;
        
        [_mapView setMapStatus:[BMKMapStatus statusWithCenterCoordinate:annotation.coordinate zoomLevel:15] withAnimation:YES];
        
        [self.searchMenuForHouseView setCurrentSelectLocationModel:annotation.areaModel];
        
    }
}

这里没有做网络请求的方法,因为被下面这个方法中替代了,这个下面说

    [_mapView setMapStatus:[BMKMapStatus statusWithCenterCoordinate:annotation.coordinate zoomLevel:15] withAnimation:YES];

商圈的加载和区域是一样的,这里就不再赘述了

这是mapView的代理方法,当mapView的zoomLevel改变或者mapView的region发生改变是会调用,我们的加载数据请求是放在这里做的,不同的地图zoomlevel显示不同标注:
一般区域的标注在地图上显示缩放水平为12、13级
商圈的标注在地图上显示缩放水平为14、15级
楼盘,学校在地图上显示缩放水平为17级
据此我们可以根据不同的缩放水平来进行不同的网络请求
-(void)mapView:(BMKMapView *)mapView regionDidChangeAnimated:(BOOL)animated{
 
    if (mapView.zoomLevel <= 13 && !_inModalStatus ){
        
        if(self.areaArray.count>0){
            
            [self addAreaAnnotation];
        }else {
            [self loadAreaAnnotation];
        }
        
    }else if (mapView.zoomLevel >13 && mapView.zoomLevel <17 && !_inModalStatus){
        
        self.areaArray = nil;
        [self loadTradingAnnotationWith:mapView.region.center fromMenuChoosed:animated];
        
    }else if (mapView.zoomLevel >= 17){
        
        self.areaArray = nil;
        [self loadVillageAnnotationWith:mapView.region.center fromMenuChoosed:animated];
        
    }else {
        
        if (!animated){
            
            [self resetArea:@"地图位置"];
        }
        [self.mapView removeAnnotations:self.mapViewAnnotations];
    }
}

这里我们再来说下这个方法

[_mapView setMapStatus:[BMKMapStatus statusWithCenterCoordinate:annotation.coordinate zoomLevel:15] withAnimation:YES];

进到这个方法的定义内:
/**

  • 设置地图状态
  • @param [in] mapStatus 地图状态信息
  • @param [in] bAnimation 是否需要动画效果,true:需要做动画
    */
    这是百度地图提供的方法
    我们需要做的是计算BMKMapStatus;这个类包含这些属性:
///缩放级别:[3~19]
@property (nonatomic, assign) float fLevel;
///旋转角度
@property (nonatomic, assign) float fRotation;
///俯视角度:[-45~0]
@property (nonatomic, assign) float fOverlooking;
///屏幕中心点坐标:在屏幕内,超过无效
@property (nonatomic) CGPoint targetScreenPt;
///地理中心点坐标:经纬度
@property (nonatomic) CLLocationCoordinate2D targetGeoPt;
///当前地图范围,采用直角坐标系表示,向右向下增长
@property (nonatomic, assign, readonly) BMKMapRect visibleMapRect;

这里我们需要的就是缩放级别和地理中心点坐标:经纬度
我们这里对做了一个类别并提供这个方法来计算这2个属性

+ (BMKMapStatus *)statusWithCenterCoordinate:(CLLocationCoordinate2D )centerCoordinate
                                   zoomLevel:(NSUInteger)zoomLevel;

这样就可以当地图位置和缩放发生改变时被获取到,去执行代理方法。

这样地图3级显示区域、商业、楼盘的功能就实现了。
下面再简单说下在地图上画地铁的方法:

//画地铁
-(void)addSubWayAnnotationAndDrawSubWayLine{
    
    [_mapView removeAnnotations:self.modalAnimations];
    
    NSArray* arrayForOverlays = [NSArray arrayWithArray:_mapView.overlays];
    [_mapView removeOverlays:arrayForOverlays];
    
    CLLocationCoordinate2D *coords =  malloc([self.subWayArray count] * sizeof(CLLocationCoordinate2D));
    
    NSMutableArray *annotations= [NSMutableArray new];
    
    for (int i = 0; i<self.subWayArray.count; i++) {
        SubWayStationModel *model = self.subWayArray[i];
        
        SubWayStationAnnotation *station = [SubWayStationAnnotation new];
        station.subWayStationModel = model;
        station.coordinate = model.location;
        [annotations addObject:station];
        //point
        coords[i] = model.location;
    }
    
    self.modalAnimations = [annotations copy];
    [_mapView addAnnotations:self.modalAnimations];
    
    //构建BMKPolyline
    BMKPolyline* polyline = [BMKPolyline polylineWithCoordinates:coords count:self.subWayArray.count];
    
    //添加分段纹理绘制折线覆盖物
    [self.mapView addOverlay:polyline];
    
    //设置地图位置
    [self mapViewFitPolyLine];
}

//根据地铁点设置地图位置
- (void)mapViewFitPolyLine{
    
    CLLocationCoordinate2D center;
    
    if (self.searchModel.stationCoordinate.latitude>0) {
        center = self.searchModel.stationCoordinate;
    }else {
        
        if (self.subWayArray.count>0) {
            NSInteger index = self.subWayArray.count/2;
            SubWayStationModel *model = self.subWayArray[index];
            center = model.location;
        }
    }
    
    [_mapView setMapStatus:[BMKMapStatus statusWithCenterCoordinate:center zoomLevel:15] withAnimation:YES];
    
}

- (BMKOverlayView*)mapView:(BMKMapView *)map viewForOverlay:(id<BMKOverlay>)overlay{
    if ([overlay isKindOfClass:[BMKPolyline class]]) {
        BMKPolylineView* polylineView = [[BMKPolylineView alloc] initWithOverlay:overlay];
        polylineView.lineWidth = 4.0;
        polylineView.fillColor = [UIColor colorWithHex:0xfb3534];
        polylineView.strokeColor = [UIColor colorWithHex:0xfb3534];
        return polylineView;
    }
    return nil;
}

就是简单的拿数据显示,并没有什么需要说的。地铁站的标注跟区域商圈一样显示。
感觉说的比较乱,如果有朋友做这方面的可以留言或者加我QQ聊。

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

推荐阅读更多精彩内容