• iOS-BMK标注&覆盖物


    在iOS开发中,地图算是一个比较重要的模块。我们常用的地图有高德地图,百度地图,谷歌地图,对于中国而言,苹果公司已经不再使用谷歌地图,官方使用的是高德地图。下面将讲述一下百度地图开发过程中的一些小的知识点。

    对于如何配置百度地图的开发环境,在此不再讲述,具体可以参考:http://developer.baidu.com/map/index.php?title=iossdk/guide/buildproject

    百度地图iOS的API下载地址:http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download

    关于百度地图的基本使用,我们可以参考百度地图的开发文档,在此主要总结一下开发文档中一些重要的知识点和延伸点。(地图版本IOS SDK 2.9.0)

    首先说明一下百度地图开发中可能遇到的问题:

    如何添加标注(系统标注和自定义标注)

     1 //添加标记
     2 -(void)viewDidAppear:(BOOL)animated
     3 {
     4     /*
     5     for (int i = 0; i < 3; i++) {
     6         BMKPointAnnotation* annotation = [[BMKPointAnnotation alloc]init];
     7         CLLocationCoordinate2D coor;
     8         coor.latitude = 39.915 + i*2;
     9         coor.longitude = 116.404 + i*2;
    10         annotation.coordinate = coor;
    11         annotation.title = @"这里是北京";
    12         [myMapView addAnnotation:annotation];
    13     }
    14     */
    15     BMKPointAnnotation* annotation = [[BMKPointAnnotation alloc]init];
    16     CLLocationCoordinate2D coor;
    17     coor.latitude = 39.915;
    18     coor.longitude = 116.404;
    19     annotation.coordinate = coor;
    20     annotation.title = @"这里是北京";
    21     annotation.subtitle = @"1";
    22     //[myMapView addAnnotation:annotation];
    23     
    24     BMKPointAnnotation* annotation1 = [[BMKPointAnnotation alloc]init];
    25     CLLocationCoordinate2D coor1;
    26     coor1.latitude = 38.915;
    27     coor1.longitude = 113.404 + 2;
    28     annotation1.coordinate = coor1;
    29     annotation1.title = @"这里也是北京";
    30     annotation1.subtitle = @"2";
    31     //[myMapView addAnnotation:annotation1];
    32     
    33     BMKPointAnnotation* annotation2 = [[BMKPointAnnotation alloc]init];
    34     CLLocationCoordinate2D coor2;
    35     coor2.latitude = 38.915;
    36     coor2.longitude = 119.404 + 2;
    37     annotation2.coordinate = coor2;
    38     annotation2.title = @"这里同样是北京";
    39     annotation2.subtitle = @"3";
    40     //[myMapView addAnnotation:annotation2];
    41     
    42     NSArray *arr = [NSArray arrayWithObjects:annotation,annotation1,annotation2, nil];
    43     [myMapView addAnnotations:arr];
    44 }
    45 
    46 -(BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id<BMKAnnotation>)annotation
    47 {
    48     if ([annotation isKindOfClass:[BMKPointAnnotation class]])
    49     {
    50         BMKPinAnnotationView *newAnnotationView = (BMKPinAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:@"AnnotationView"];
    51         newAnnotationView = [[BMKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"AnnotationView"];
    52         newAnnotationView.pinColor = BMKPinAnnotationColorPurple;
    53         newAnnotationView.animatesDrop = YES;// 设置该标注点动画显示
    54         return newAnnotationView;
    55     }
    56     return nil;
    57 }
    系统标记
    如何自定义大头针
    自定义大头针就是改变大头针的样式,如你想使用自己的图片代替上面显示的样式,代码实现跟上面的代码基本一样。只是在上面代理实现的代码中加入下面的代码即可。
     1 newAnnotationView.image = [UIImage imageNamed:@"2"]; (图片显示的大小,可以通过newAnnotationView的frame设定)
     
    如何修改气泡样式
    在气泡上默认是可以显示两行信息,一个title,一个subtitle,在此仅修改气泡的样式,如边框大小,字体,等基本信息,没有改变总体布局。
     
     
     1 -(BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id<BMKAnnotation>)annotation
     2 {
     3     if ([annotation isKindOfClass:[BMKPointAnnotation class]])
     4     {
     5         BMKPinAnnotationView *newAnnotationView = (BMKPinAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:@"AnnotationView"];
     6         newAnnotationView = [[BMKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"AnnotationView"];
     7         newAnnotationView.pinColor = BMKPinAnnotationColorPurple;
     8         newAnnotationView.animatesDrop = YES;// 设置该标注点动画显示
     9        
    10         UIView *view = [[UIView alloc]init];
    11         view.frame = CGRectMake(0, 0, 100, 60);
    12         view.backgroundColor = [UIColor greenColor];
    13         [view.layer setMasksToBounds:YES];
    14         [view.layer setCornerRadius:3];
    15         view.alpha = 0.9;
    16         
    17         UILabel *label1 = [[UILabel alloc]init];
    18         label1.frame = CGRectMake(0, 0, 100, 30);
    19         label1.text = annotation.title;
    20         label1.numberOfLines = 0;
    21         label1.font = [UIFont systemFontOfSize:12];
    22         label1.textColor = [UIColor blackColor];
    23         [view addSubview:label1];
    24         
    25         UILabel *label2 = [[UILabel alloc]init];
    26         label2.frame = CGRectMake(0, 30, 100, 30);
    27         label2.text = annotation.subtitle;
    28         label2.numberOfLines = 0;
    29         label2.font = [UIFont systemFontOfSize:10];
    30         label2.textColor = [UIColor lightGrayColor];
    31         [view addSubview:label2];
    32         
    33         BMKActionPaopaoView *pView = [[BMKActionPaopaoView alloc]initWithCustomView:view];
    34         pView.frame = CGRectMake(0, 0, 100, 60);
    35         ((BMKPinAnnotationView *)newAnnotationView).paopaoView = pView;
    36         return newAnnotationView;
    37     }
    38     return nil;
    39 }
    简单定义气泡样式

    如果我们想要修改气泡的布局怎样处理呢?

    因为系统默认的一个是坐标,一个标题,一个子标题,我们想要按照自己的方式布局弹出的气泡,我们需要做什么工作呢?

    首先系统提供BMKPointAnnotation的方法不够我们使用,我们需要继承这个类,假如新类为myPoint,添加一些新的属性。比如这个类,我们需要添加三个属性。

    分别是NSString *imgName ; NSString *placeName; NSString *idNum;

    接下来我们我们需要自定义气泡,气泡本身是一个UIView,我们可以在继承于UIView,创建一个子类myPaopao;在myPaopao里面要添加三个控件,显示上面定义的三个属性。

    1 #import <UIKit/UIKit.h>
    2 
    3 @interface myPaopao : UIView
    4 @property(nonatomic,retain)UIImageView *imgView;
    5 @property(nonatomic,retain) UILabel *placeName;
    6 @property(nonatomic,retain) UILabel *idNum;
    7  
    8 @end
    myPaopao.h
     1 #import "myPaopao.h"
     2 
     3 @implementation myPaopao
     4  
     5 -(instancetype)initWithFrame:(CGRect)frame
     6 {
     7     self = [super initWithFrame:frame];
     8     if (self)
     9     {
    10         self.frame = CGRectMake(0, 0, 150, 60);
    11         self.backgroundColor = [UIColor whiteColor];
    12         
    13         _imgView = [[UIImageView alloc]init];
    14         _imgView.frame = CGRectMake(0, 0, 60, 60);
    15         [self addSubview:_imgView];
    16         
    17         _placeName = [[UILabel alloc]init];
    18         _placeName.frame = CGRectMake(60, 0, 90, 30);
    19         _placeName.font = [UIFont systemFontOfSize:12];
    20         [self addSubview:_placeName];
    21         
    22         _idNum = [[UILabel alloc]init];
    23         _idNum.frame = CGRectMake(60, 30, 90, 30);
    24         [self addSubview:_idNum];
    25         
    26     }
    27     return self;
    28 }
    29 @end
    myPaopao.m
     1 //添加标记
     2 -(void)viewDidAppear:(BOOL)animated
     3 {
     4     myPoint* annotation = [[myPoint alloc]init];
     5     CLLocationCoordinate2D coor;
     6     coor.latitude = 39.915;
     7     coor.longitude = 116.404;
     8     annotation.coordinate = coor;
     9     annotation.imgName = @"1.jpg";
    10     annotation.placeName = @"这里是北京";
    11     annotation.idNum = @"1";
    12     [myMapView addAnnotation:annotation];
    13     
    14     myPoint* annotation1 = [[myPoint alloc]init];
    15     CLLocationCoordinate2D coor1;
    16     coor1.latitude = 38.915;
    17     coor1.longitude = 113.404 + 2;
    18     annotation1.coordinate = coor1;
    19     annotation1.imgName = @"2.jpg";
    20     annotation1.placeName = @"这里也是北京";
    21     annotation1.idNum = @"2";
    22     [myMapView addAnnotation:annotation1];
    23 
    24 }
    25 -(BMKAnnotationView *)mapView:(BMKMapView *)mapView viewForAnnotation:(id<BMKAnnotation>)annotation
    26 {
    27     if ([annotation isKindOfClass:[myPoint class]])
    28     {
    29         myPoint *myAnnotation = (myPoint *)annotation;
    30         
    31         BMKPinAnnotationView *newAnnotationView = (BMKPinAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:@"AnnotationView"];
    32         newAnnotationView = [[BMKPinAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:@"AnnotationView"];
    33         newAnnotationView.pinColor = BMKPinAnnotationColorPurple;
    34         newAnnotationView.animatesDrop = YES;// 设置该标注点动画显示
    35         myPaopao *paopapo = [[myPaopao alloc]init];
    36         
    37         paopapo.imgView.image = [UIImage imageNamed:myAnnotation.imgName];
    38         paopapo.placeName.text = myAnnotation.placeName;
    39         paopapo.idNum.text = myAnnotation.idNum;
    40         BMKActionPaopaoView *pView = [[BMKActionPaopaoView alloc]initWithCustomView:paopapo];
    41         ((BMKPinAnnotationView *)newAnnotationView).paopaoView = pView;
    42         return newAnnotationView;
    43     }
    44     return nil;
    45 }
    实现代码

    如果有需要,我们还可以添加一个按钮,跳转到详情界面,添加按钮的方法,与上面的方法相同,在此

     点聚合功能

     点聚合功能是v2.9.0新增加的一个功能,如果在一个区域有大量的点,会产生覆盖现象,点聚合功能可以实现将很多点聚合到一个点上,通过缩放比例,可以显示更多点或聚合点。我们在下载SDK的时候,会带有一个Demo,从Demo中我们可以找到相应的实现代码。在开发文档中给出了我们核心代码:

    折线(从一位置到另一位置的线段)
     
     代码段:
     1 //添加标记
     2 -(void)viewDidAppear:(BOOL)animated
     3 {
     4     CLLocationCoordinate2D coors[2] = {0};
     5     coors[0].latitude = 39.315;
     6     coors[0].longitude = 116.304;
     7     coors[1].latitude = 30.515;
     8     coors[1].longitude = 116.504;
     9     BMKPolyline *polyline = [BMKPolyline polylineWithCoordinates:coors count:2];
    10     [myMapView addOverlay:polyline];
    11 }
    12 -(BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay
    13 {
    14     NSLog(@"sdf");
    15     if ([overlay isKindOfClass:[BMKPolyline class]])
    16     {
    17         BMKPolylineView *polylineView = [[BMKPolylineView alloc]initWithPolyline:overlay];
    18         polylineView.strokeColor = [[UIColor greenColor]colorWithAlphaComponent:1];
    19         polylineView.lineWidth = 5.0;
    20         return polylineView;
    21     }
    22     return nil;
    23 }
    折线

    分段纹理分段折线

    代码段:
     1 //添加标记
     2 -(void)viewDidAppear:(BOOL)animated
     3 {
     4     CLLocationCoordinate2D coords[5] = {0};
     5     coords[0].latitude = 39.965;
     6     coords[0].longitude = 116.404;
     7     coords[1].latitude = 39.925;
     8     coords[1].longitude = 116.454;
     9     coords[2].latitude = 39.955;
    10     coords[2].longitude = 116.494;
    11     coords[3].latitude = 39.905;
    12     coords[3].longitude = 116.654;
    13     coords[4].latitude = 39.965;
    14     coords[4].longitude = 116.704;
    15     //构建分段文理索引数组
    16     NSArray *textureIndex = [NSArray arrayWithObjects:
    17                              [NSNumber numberWithInt:0],
    18                              [NSNumber numberWithInt:1],
    19                              [NSNumber numberWithInt:2],
    20                              [NSNumber numberWithInt:1], nil];
    21     BMKPolyline *polyline = [BMKPolyline polylineWithCoordinates:coords count:5 textureIndex:textureIndex];
    22     [myMapView addOverlay:polyline];
    23 }
    24 -(BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay
    25 {
    26     if ([overlay isKindOfClass:[BMKPolyline class]])
    27     {
    28         BMKPolylineView* polylineView = [[BMKPolylineView alloc] initWithOverlay:overlay];
    29         polylineView.lineWidth = 5;
    30         polylineView.isFocus = YES;// 是否分段纹理绘制(突出显示),默认YES
    31         //加载分段纹理图片,必须否则不能进行分段纹理绘制
    32         [polylineView loadStrokeTextureImages:
    33         [NSArray arrayWithObjects:[UIImage imageNamed:@"1.jpg"],
    34           [UIImage imageNamed:@"2.jpg"],
    35           [UIImage imageNamed:@"3.jpg"],nil]];
    36         return polylineView;
    37     }
    38     return nil;
    39 }
    纹理折线

    分段颜色分段折线

    代码段:

     1 -(void)viewDidAppear:(BOOL)animated
     2 {
     3     CLLocationCoordinate2D coords[5] = {0};
     4     coords[0].latitude = 39.965;
     5     coords[0].longitude = 116.404;
     6     coords[1].latitude = 39.925;
     7     coords[1].longitude = 116.454;
     8     coords[2].latitude = 39.955;
     9     coords[2].longitude = 116.494;
    10     coords[3].latitude = 39.905;
    11     coords[3].longitude = 116.654;
    12     coords[4].latitude = 39.965;
    13     coords[4].longitude = 116.704;
    14     //构建分段文理索引数组
    15     NSArray *colorIndexs = [NSArray arrayWithObjects:
    16                              [NSNumber numberWithInt:0],
    17                              [NSNumber numberWithInt:1],
    18                              [NSNumber numberWithInt:2],
    19                              [NSNumber numberWithInt:1], nil];
    20     BMKPolyline *polyline = [BMKPolyline polylineWithCoordinates:coords count:5 textureIndex:colorIndexs];
    21     [myMapView addOverlay:polyline];
    22 }
    23 -(BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay
    24 {
    25     if ([overlay isKindOfClass:[BMKPolyline class]])
    26     {
    27         BMKPolylineView* polylineView = [[BMKPolylineView alloc] initWithOverlay:overlay];
    28         polylineView.lineWidth = 5;
    29         // 使用分段颜色绘制时,必须设置(内容必须为UIColor)
    30         polylineView.colors = [NSArray arrayWithObjects:[UIColor greenColor], [UIColor redColor], [UIColor yellowColor], nil];
    31         return polylineView;
    32     }
    33     return nil;
    34 }
    颜色分段

    弧线(起点,途经点,终点)

    代码段:

     1 -(void)viewDidAppear:(BOOL)animated
     2 {
     3     CLLocationCoordinate2D coords[3] = {0};
     4     coords[0].latitude = 39.9374;
     5     coords[0].longitude = 116.350;
     6     coords[1].latitude = 39.9170;
     7     coords[1].longitude = 116.360;
     8     coords[2].latitude = 39.9479;
     9     coords[2].longitude = 116.373;
    10     BMKArcline *arcline = [BMKArcline arclineWithCoordinates:coords];
    11     [myMapView addOverlay:arcline];
    12 }
    13 -(BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay
    14 {
    15     if ([overlay isKindOfClass:[BMKArcline class]])
    16     {
    17         NSLog(@"adf");
    18         BMKArclineView* arclineView = [[BMKArclineView alloc] initWithOverlay:overlay];
    19         arclineView.strokeColor = [[UIColor blackColor]colorWithAlphaComponent:0.5];
    20         arclineView.lineWidth = 5.0;
    21         return arclineView;
    22     }
    23     return nil;
    24 }
    弧线

    多边形

    代码段:

     1 -(void)viewDidAppear:(BOOL)animated
     2 {
     3     CLLocationCoordinate2D coords[3] = {0};
     4     coords[0].latitude = 39;
     5     coords[0].longitude = 116;
     6     coords[1].latitude = 38;
     7     coords[1].longitude = 115;
     8     coords[2].latitude = 38;
     9     coords[2].longitude = 117;
    10     BMKPolygon *ploygon = [BMKPolygon polygonWithCoordinates:coords count:3];
    11     [myMapView addOverlay:ploygon];
    12 }
    13 -(BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay
    14 {
    15     if ([overlay isKindOfClass:[BMKPolygon class]])
    16     {
    17         BMKPolygonView* polygonView = [[BMKPolygonView alloc] initWithOverlay:overlay];
    18         polygonView.strokeColor = [[UIColor purpleColor] colorWithAlphaComponent:1];
    19         polygonView.fillColor = [[UIColor cyanColor] colorWithAlphaComponent:0.2];
    20         polygonView.lineWidth = 5.0;
    21         
    22         return polygonView;
    23     }
    24     return nil;
    25 }
    多边形

    代码段:

     1 -(void)viewDidAppear:(BOOL)animated
     2 {
     3     CLLocationCoordinate2D coor;
     4     coor.latitude = 39.915;
     5     coor.longitude = 116.404;
     6     BMKCircle* circle = [BMKCircle circleWithCenterCoordinate:coor radius:5000];
     7     [myMapView addOverlay:circle];
     8 }
     9 -(BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay
    10 {
    11     if ([overlay isKindOfClass:[BMKCircle class]])
    12     {
    13         BMKCircleView* circleView = [[BMKCircleView alloc] initWithOverlay:overlay];
    14         circleView.fillColor = [[UIColor cyanColor] colorWithAlphaComponent:0.5];
    15         circleView.strokeColor = [[UIColor orangeColor] colorWithAlphaComponent:0.5];
    16         circleView.lineWidth = 10.0;
    17         
    18         return circleView;
    19     }
    20     return nil;
    21 }

    图片图层

    第一种方法根据坐标,缩放尺度确定

    代码段:

     1  -(void)viewDidAppear:(BOOL)animated
     2 {
     3     CLLocationCoordinate2D coors;
     4     coors.latitude = 39.800;
     5     coors.longitude = 116.404;
     6     BMKGroundOverlay* ground = [BMKGroundOverlay groundOverlayWithPosition:coors
     7                                                                  zoomLevel:5 anchor:CGPointMake(0.0f,0.0f)
     8                                                                     icon:[UIImage imageNamed:@"1.jpg"]];
     9     [myMapView addOverlay:ground];
    10 }
    11 -(BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay
    12 {
    13     if ([overlay isKindOfClass:[BMKGroundOverlay class]]){
    14         BMKGroundOverlayView* groundView = [[BMKGroundOverlayView alloc] initWithOverlay:overlay];
    15         return groundView;
    16     }
    17     return nil;
    18 }
    图片图层一

    第二种方法根据指定区域生成

    代码段:

     1 -(void)viewDidAppear:(BOOL)animated
     2 {
     3     CLLocationCoordinate2D coords[2] = {0};
     4     coords[0].latitude = 39.815;
     5     coords[0].longitude = 116.404;
     6     coords[1].latitude = 39.915;
     7     coords[1].longitude = 116.504;
     8     BMKCoordinateBounds bound;
     9     bound.southWest = coords[0];
    10     bound.northEast = coords[1];
    11     BMKGroundOverlay* ground = [BMKGroundOverlay groundOverlayWithBounds: bound
    12                                                                      icon:[UIImage imageNamed:@"2.jpg"]];
    13     [myMapView addOverlay:ground];
    14 }
    15 -(BMKOverlayView *)mapView:(BMKMapView *)mapView viewForOverlay:(id<BMKOverlay>)overlay
    16 {
    17     if ([overlay isKindOfClass:[BMKGroundOverlay class]]){
    18         BMKGroundOverlayView* groundView = [[BMKGroundOverlayView alloc] initWithOverlay:overlay];
    19         return groundView;
    20     }
    21     return nil;
    22 }
    图片图层二
     
     
     
     
     
     
  • 相关阅读:
    2015-04
    2014-12
    2014-9
    nginx中ngx_http_ssl_module模块
    nginx中ngx_http_gzip_module模块
    Nginx中ngx_http_log_module模块
    Nginx中ngx_http_auth_basic_moudel和ngx_http_stub_status_module模块
    nginx中ngx_http_access_module模块
    nginx中ngx_http_core_module模块
    Nginx安装
  • 原文地址:https://www.cnblogs.com/wangyaoguo/p/4886993.html
Copyright © 2020-2023  润新知