美文网首页ios 知识点iOS开发你需要知道的
高德地图实现自定义小蓝点 自定义点标记 绘制多边形/圆形区域 根

高德地图实现自定义小蓝点 自定义点标记 绘制多边形/圆形区域 根

作者: MoneyLee | 来源:发表于2018-06-05 00:26 被阅读1598次

    最近项目中有需要应用到高德地图的模块,在参考别的app地图相关模块实现过程中,自己产生了一些想法。首先说明要实现的功能需求。类似支付宝app内的跑腿功能,在全市的所有商铺,电梯广告等任意地点发布任务,参与者要根据地图上的标记接取任务后到达指定地点,完成任务,获取报酬。

    首先我想到的是共享单车app的找附近的车功能。


    4011528126383_.pic_hd.jpg

    分析其实现原理应该是获取用户当前坐标,然后将坐标发送至服务器,服务器计算这个用户周围1公里范围内空闲的单车,然后将坐标绘制在地图上,最后导航引导用户找到该车。但是共享单车数量庞大,一个城市或许会有几百万辆或者几千万辆,但是我们所做的体量比较小,或许有另外的方式实现此功能。

    使用高德地图SDK,具体集成方法和相关配置请参考官方文档,这里不做介绍。首先我们需要1000个模拟数据 沈阳市的经纬度范围是 东经122° 25′ --- 123° 48′, 北纬41°12′ --- 42° 17′

    我们根据这个范围随机生成1万个坐标,然后先在地图上自定义视图标记出来,但是不要显示,这里先全部显示看一下 ps:此图手抖多打个0,是1万个坐标点...


    3991528126362_.pic_hd.jpg

    然后在当前地图的中心点绘制一个半径为3km的圆形, 在地图移动的时候,这个圆心也随之变化,这个时候遍历这些数据,如果这个数据的坐标在圆的范围内那么就显示,反之就隐藏。

    4031528126386_.pic_hd.jpg

    这样做的好处是只需要从服务器拿取一次数据,数据量小的时候也很流畅,减轻了服务器的运算,但是弊端就是数据量庞大的时候会非常占用手机的内存,这也是我最开始没有考虑到的一点,


    屏幕快照 2018-06-05 上午12.01.55.png

    为了稳定不建议这样处理,除非数据量小的时候,我用iphone6测试 数据量达到500就开始卡顿,用iphoneX 数据量1000还可以接受,为了向下兼容不建议这种做法,还是老实向服务器请求数据比较好些。写这个文章主要还是想多了解下高德的API,加深下理解,以后再使用高德SDK的时候更加熟练。如果哪位大神看到这篇文章有好的优化方案请赐教,十分感谢,如果感觉垃圾,求轻喷。下面就开始代码部分

    创建地图视图

    //初始化地图
    _mapView = [[MAMapView alloc] initWithFrame:self.view.bounds];
    _mapView.userTrackingMode = MAUserTrackingModeFollow;
    //如果您需要进入地图就显示定位小蓝点,则需要下面两行代码
    _mapView.showsUserLocation = YES;
    _mapView.showsScale = NO;
    _mapView.zoomLevel = 13;
    _mapView.showTraffic = YES;
    _mapView.showsCompass = NO;
    _mapView.delegate = self;
    //_mapView.desiredAccuracy = 100;
    ///把地图添加至view
    [self.view addSubview:_mapView];
    
    
    //自定义定位小蓝点
    //初始化 MAUserLocationRepresentation 对象
    MAUserLocationRepresentation *r = [[MAUserLocationRepresentation alloc] init];
    r.showsAccuracyRing = NO;///精度圈是否显示,默认YES
    
    r.showsHeadingIndicator = YES;///是否显示方向指示       (MAUserTrackingModeFollowWithHeading模式开启)。默认为YES
    //r.fillColor = [UIColor redColor];///精度圈 填充颜色, 默认     kAccuracyCircleDefaultColor
    r.image = [UIImage imageNamed:@"endPoint"]; 
    //定位图标, 与蓝色原点互斥
    //  [_mapView    updateUserLocationRepresentation:r];`
    
    CLLocationCoordinate2D coor = _mapView.centerCoordinate;
    //以初始地图中心点为圆心 绘制半径为3km米的圆
    _circleView = [MACircle circleWithCenterCoordinate:coor radius:3000];
    [self.mapView addOverlay:_circleView];
    

    获取模拟数据

    //沈阳位于东经122゜25'---123゜48’,北纬41゜12’,---42゜17’,之间
    self.annotations = [NSMutableArray array];
    for (int i = 0; i < 1000; i ++) {
    
        CGFloat ls = [self randomBetween:41 AndBigNum:42 AndPrecision:1000000];
        CGFloat lw = [self randomBetween:123 AndBigNum:124 AndPrecision:1000000];
        
        MAPointAnnotation *a1 = [[MAPointAnnotation alloc] init];
        a1.coordinate = (CLLocationCoordinate2D){ls,lw};
        a1.title      = [NSString stringWithFormat:@"anno: %d", i];
        a1.subtitle = [NSString stringWithFormat:@"自定义点标记内容: %d",I];
        [self.annotations addObject:a1];
    }
    

    获取指定范围内坐标点的函数

    - (float)randomBetween:(float)smallNum AndBigNum:(float)bigNum AndPrecision:(NSInteger)precision{
        //求两数之间的差值
        float subtraction = bigNum - smallNum;
        //取绝对值
        subtraction = ABS(subtraction);
        //乘以精度的位数
        subtraction *= precision;
        //在差值间随机
        float randomNumber = arc4random() % ((int) subtraction + 1);
        //随机的结果除以精度的位数
        randomNumber /= precision;
        //将随机的值加到较小的值上
        float result = MIN(smallNum, bigNum) + randomNumber;
        //返回结果
        return result;
        }
    
    #pragma mark - MAMapViewDelegate
    //绘制区域图形的相关属性配置 可以是矩形 多边形 圆形
    - (MAOverlayRenderer *)mapView:(MAMapView *)mapView rendererForOverlay:(id <MAOverlay>)overlay
    {
        if ([overlay isKindOfClass:[MACircle class]]) {
            MACircleRenderer * polygonRenderer = [[MACircleRenderer alloc]initWithCircle:overlay];
            polygonRenderer.lineWidth   = 1.f;
            // polygonRenderer.strokeColor = [UIColor yellowColor];
            polygonRenderer.fillColor = [UIColor colorWithRed:0.73 green:0.73 blue:0.73 alpha:0.2];
            return polygonRenderer;
        }
        return nil;
    }
    
    
    /*!
     @brief 根据anntation生成对应的View
     @param mapView 地图View
     @param annotation 指定的标注
     @return 生成的标注View
     */
    - (MAAnnotationView*)mapView:(MAMapView *)mapView viewForAnnotation:(id <MAAnnotation>)annotation {
        
        //定位蓝点  如果不在此判断 自身的定位点样式会被其他自定义的样式修改
        if ([annotation isKindOfClass:[MAUserLocation class]]) {
            return nil;
        }
    
        if ([annotation isKindOfClass:[MAPointAnnotation class]]){
    
            static NSString *reuseIndetifier = @"annotationReuseIndetifier";
            MAAnnotationView *annotationView = (MAAnnotationView *)[mapView dequeueReusableAnnotationViewWithIdentifier:reuseIndetifier];
            if (annotationView == nil){
                annotationView = [[MAAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:reuseIndetifier];
            }
            annotationView.image = [UIImage imageNamed:@"qwuh"];
            annotationView.canShowCallout               = YES;
            annotationView.draggable                    = YES;
            annotationView.rightCalloutAccessoryView    = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
            //设置中心点偏移,使得标注底部中间点成为经纬度对应点
            annotationView.centerOffset = CGPointMake(0, -18);
            return annotationView;
        }
        return nil;
    }
    
    
    //点击屏幕获取经纬度 (手动获取模拟数据使用)
    - (void)mapView:(MAMapView *)mapView didSingleTappedAtCoordinate:(CLLocationCoordinate2D)coordinate{
        NSLog(@"%f ---- %f",coordinate.latitude,coordinate.longitude);
        //41.737987 ---- 123.422523
        //41.765668 ---- 123.434932
        //41.794761 ---- 123.409902
    }
    
    
    /**
     * @brief 地图区域改变过程中会调用此接口 since 4.6.0
     * @param mapView 地图View
     */
    - (void)mapViewRegionChanged:(MAMapView *)mapView{
        
        //移动地图 根据新的中心点坐标 改变所绘制图形的位置
        [self.circleView setCircleWithCenterCoordinate:mapView.centerCoordinate radius:3000];
        //遍历所有的自定义坐标点
        for (int i = 0; i < self.annotations.count; i ++) {
            
            MAPointAnnotation *a1 = self.annotations[I];
            CLLocationCoordinate2D loc1 = a1.coordinate;
            
    //        [self.mapView addAnnotation:a1];
            if(MACircleContainsCoordinate(loc1, self.circleView.coordinate, 3000)) {
                NSLog(@"在区域内 新增自定义坐标点");
                [self.mapView addAnnotation:a1];
            } else {
                NSLog(@"不在区域内 移除自定义坐标点");
                [self.mapView removeAnnotation:a1];
            }
        }
    }
    
    

    或许会用到的相关代理方法

    /**
     * @brief 地图移动结束后调用此接口
     * @param mapView       地图view
     * @param wasUserAction 标识是否是用户动作
     */
    - (void)mapView:(MAMapView *)mapView mapDidMoveByUser:(BOOL)wasUserAction{
        if (wasUserAction) {
            //当前地图的中心点,改变该值时,地图的比例尺级别不会发生变化
        }
    }
    
    /**
     * @brief 定位失败后,会调用此函数
     * @param mapView 地图View
     * @param error 错误号,参考CLError.h中定义的错误号
     */
    - (void)mapView:(MAMapView *)mapView didFailToLocateUserWithError:(NSError *)error{
        NSLog(@"定位失败");
    }
    
    /**
     * @brief 地图初始化完成(在此之后,可以进行坐标计算)
     * @param mapView 地图View
     */
    - (void)mapInitComplete:(MAMapView *)mapView{
    //    NSLog(@"当前经纬度%lf--%lf",mapView.userLocation.coordinate.latitude,mapView.userLocation.coordinate.longitude);
    }
    
    
    
    
    /*!
     @brief 当mapView新添加annotation views时调用此接口
     @param mapView 地图View
     @param views 新添加的annotation views
     */
    - (void)mapView:(MAMapView *)mapView didAddAnnotationViews:(NSArray *)views {
        
    }
    
    /*!
     @brief 当选中一个annotation views时调用此接口
     @param mapView 地图View
     @param views 选中的annotation views
     */
    - (void)mapView:(MAMapView *)mapView didSelectAnnotationView:(MAAnnotationView *)view {
        
    }
    
    /*!
     @brief 当取消选中一个annotation views时调用此接口
     @param mapView 地图View
     @param views 取消选中的annotation views
     */
    - (void)mapView:(MAMapView *)mapView didDeselectAnnotationView:(MAAnnotationView *)view {
        
    }
    
    /*!
     @brief 标注view的accessory view(必须继承自UIControl)被点击时调用此接口
     @param mapView 地图View
     @param annotationView callout所属的标注view
     @param control 对应的control
     */
    - (void)mapView:(MAMapView *)mapView annotationView:(MAAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control {
        
    }
    
    

    https://github.com/ReReReReReRe/GDMapDemo/tree/master/PaiPaiPai

    相关文章

      网友评论

        本文标题:高德地图实现自定义小蓝点 自定义点标记 绘制多边形/圆形区域 根

        本文链接:https://www.haomeiwen.com/subject/srdysftx.html