Gaode map realizes customized small blue dots, customized point markers, drawing polygon / circular areas, and displaying or hiding customized point markers according to the movement of the map

Recently, the project has been upgraded , The project originally used Apple's own positioning module , But the upgrade and revision need to be applied to the module of Gaode map , Referring to others app During the implementation of map related modules , I have some ideas . First, describe the functional requirements to be realized . It's like Alipay app The function of running errands in , In all the shops in the city , Elevator advertisements and other tasks are released at any place , Participants should receive the task according to the marks on the map and arrive at the designated place , To complete the task , Get paid .

First of all, I think of bike sharing app Find nearby car functions .

Analysis of its implementation principle should be to obtain the current coordinates of the user , Then send the coordinates to the server , The server calculates the user around 1 Free bicycles within kilometers , Then draw the coordinates on the map , Finally, the navigation guides the user to find the car . But the number of shared bicycles is huge , A city may have millions or tens of millions of vehicles , But the volume we made is relatively small , There may be another way to realize this function .

Use the Gaud map SDK, Please refer to the official documents for specific integration methods and related configurations , No introduction here . First of all, we need 1000 Analog data The longitude and latitude range of Shenyang is East longitude 122° 25′ --- 123° 48′, North latitude 41°12′ --- 42° 17′

We generate randomly according to this range 1 Ten thousand coordinates , Then mark the customized view on the map , But don't show , Let's have a look at all of them first ps: Shake your hands more in this picture 0, yes 1 Ten thousand coordinate points ...

 

Then draw a radius of 3km Round , When the map moves , The center of the circle also changes , At this time, traverse these data , If the coordinates of this data are within the range of the circle, then , On the contrary, hide .

 

 

The advantage of this is that you only need to get the data from the server once , When the amount of data is small, it is also very smooth , Reduces the computation of the server , But the drawback is that when the amount of data is huge, it will occupy the memory of the mobile phone , This is also a point I didn't consider at the beginning ,

This is not recommended for stability , Unless the amount of data is small , I use iphone6 test The amount of data reached 500 Start Caton , use iphoneX Data volume 1000 It's acceptable , This is not recommended for downward compatibility , It's better to request data from the server honestly . Writing this article mainly wants to know more about Gaode API, Deepen your understanding of , Later, use Gaode SDK More proficient when . If any God sees that this article has a good optimization scheme, please advise , Thank you very much. , If you feel garbage , Light spray . Let's start with the code

Create a map view

// Initialize map 
_mapView = [[MAMapView alloc] initWithFrame:self.view.bounds];
_mapView.userTrackingMode = MAUserTrackingModeFollow;
// If you need to enter the map, the positioning small blue dot will be displayed , You need the following two lines of code 
_mapView.showsUserLocation = YES;
_mapView.showsScale = NO;
_mapView.zoomLevel = 13;
_mapView.showTraffic = YES;
_mapView.showsCompass = NO;
_mapView.delegate = self;
//_mapView.desiredAccuracy = 100;
/// Add map to view
[self.view addSubview:_mapView];


// Custom positioning small blue dot 
// initialization  MAUserLocationRepresentation  object 
MAUserLocationRepresentation *r = [[MAUserLocationRepresentation alloc] init];
r.showsAccuracyRing = NO;/// Whether the precision circle displays , Default YES

r.showsHeadingIndicator = YES;/// Whether to display direction indication        (MAUserTrackingModeFollowWithHeading Mode on ). The default is YES
//r.fillColor = [UIColor redColor];/// Precision circle   Fill color ,  Default      kAccuracyCircleDefaultColor
r.image = [UIImage imageNamed:@"endPoint"]; 
// Positioning icon ,  Mutually exclusive with blue origin 
//  [_mapView    updateUserLocationRepresentation:r];`

CLLocationCoordinate2D coor = _mapView.centerCoordinate;
// Take the center point of the initial map as the center of the circle   Draw a radius of 3km The circle of meters 
_circleView = [MACircle circleWithCenterCoordinate:coor radius:3000];
[self.mapView addOverlay:_circleView];

Get simulation data

// Shenyang is located at the east longitude 122゜25'---123゜48’, North latitude 41゜12’,---42゜17’, Between 
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:@" Custom point marker content : %d",I];
    [self.annotations addObject:a1];
}

Get the function of coordinate points within the specified range

- (float)randomBetween:(float)smallNum AndBigNum:(float)bigNum AndPrecision:(NSInteger)precision{
    // Find the difference between two numbers 
    float subtraction = bigNum - smallNum;
    // Take the absolute value 
    subtraction = ABS(subtraction);
    // Multiply by the number of digits of precision 
    subtraction *= precision;
    // Random between differences 
    float randomNumber = arc4random() % ((int) subtraction + 1);
    // Divide the random result by the number of digits of precision 
    randomNumber /= precision;
    // Add random values to smaller values 
    float result = MIN(smallNum, bigNum) + randomNumber;
    // Return results 
    return result;
    }

#pragma mark - MAMapViewDelegate
// Related attribute configuration of drawing area graphics   It can be a rectangle   polygon   circular 
- (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  according to anntation Generate corresponding View
 @param mapView  Map View
 @param annotation  Designated labels 
 @return  Generated annotations View
 */
- (MAAnnotationView*)mapView:(MAMapView *)mapView viewForAnnotation:(id <MAAnnotation>)annotation {
    
    // Locate the blue dot    If you don't judge here   Its own anchor style will be modified by other customized styles 
    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];
        // Set the center point offset , Make the middle point at the bottom of the label the corresponding point of longitude and latitude 
        annotationView.centerOffset = CGPointMake(0, -18);
        return annotationView;
    }
    return nil;
}

// Click on the screen to get longitude and latitude  ( Manually obtain analog data for use )
- (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  This interface will be called in the process of map area change  since 4.6.0
 * @param mapView  Map View
 */
- (void)mapViewRegionChanged:(MAMapView *)mapView{
    
    // Move the map   According to the new center point coordinates   Change the position of the drawn figure 
    [self.circleView setCircleWithCenterCoordinate:mapView.centerCoordinate radius:3000];
    // Traverse all custom coordinate points 
    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(@" In the area   Add custom coordinate points ");
            [self.mapView addAnnotation:a1];
        } else {
            NSLog(@" Not in the area   Remove custom coordinate points ");
            [self.mapView removeAnnotation:a1];
        }
    }
}

Relevant proxy methods that may be used

/**
 * @brief  Call this interface after the map is moved 
 * @param mapView        Map view
 * @param wasUserAction  Identify whether it is a user action 
 */
- (void)mapView:(MAMapView *)mapView mapDidMoveByUser:(BOOL)wasUserAction{
    if (wasUserAction) {
        // The center point of the current map , When changing this value , The scale level of the map does not change 
    }
}

/**
 * @brief  After the location fails , This function will be called 
 * @param mapView  Map View
 * @param error  Error number , Reference resources CLError.h Error number defined in 
 */
- (void)mapView:(MAMapView *)mapView didFailToLocateUserWithError:(NSError *)error{
    NSLog(@" seek failed ");
}

/**
 * @brief  Map initialization complete （ After that , Coordinate calculation can be carried out ）
 * @param mapView  Map View
 */
- (void)mapInitComplete:(MAMapView *)mapView{
//    NSLog(@" Current latitude and longitude %lf--%lf",mapView.userLocation.coordinate.latitude,mapView.userLocation.coordinate.longitude);
}




/*!
 @brief  When mapView The newly added annotation views Call this interface 
 @param mapView  Map View
 @param views  Newly added annotation views
 */
- (void)mapView:(MAMapView *)mapView didAddAnnotationViews:(NSArray *)views {
    
}

/*!
 @brief  Elected one of the annotation views Call this interface 
 @param mapView  Map View
 @param views  Selected annotation views
 */
- (void)mapView:(MAMapView *)mapView didSelectAnnotationView:(MAAnnotationView *)view {
    
}

/*!
 @brief  When unchecking a annotation views Call this interface 
 @param mapView  Map View
 @param views  Unselected annotation views
 */
- (void)mapView:(MAMapView *)mapView didDeselectAnnotationView:(MAAnnotationView *)view {
    
}

/*!
 @brief  mark view Of accessory view( Must inherit from UIControl) Call this interface when clicked 
 @param mapView  Map View
 @param annotationView callout The label to which it belongs view
 @param control  Corresponding control
 */
- (void)mapView:(MAMapView *)mapView annotationView:(MAAnnotationView *)view calloutAccessoryControlTapped:(UIControl *)control {
    
}

The above is based on 2D The map of , If necessary, you can download it from the official documents 3D The map of , If you don't understand, read the documents and official Demo It can be used in combination