iOS Step by step learn to customize the map Blow box (Calloutview)--> (Baidu map, gold map, Google map)

Source: Internet
Author: User
Tags map class static class
iOS Step by step learn to customize the map Blow Box (Calloutview)--> (Baidu map, gold map, Google map)Gold map Google Map Baidu map blown out box custom


Students using the Map library on iOS must have encountered this problem: blown out box can only set title and subtitle and about the view, whether it is Baidu map or a gold map or Google Maps, only provided these four attributes, if you want to add more view, can only be customized. However, the class library can only see. h files,. m can not see, this lets the novice compares the egg ache, the huge Map class library 1:30 will not be able to touch the mind, from the beginning again learns also needs the time, this article teaches everybody to quickly make one own calloutview. When you step through the steps, and then back to use the system with the method set callout, you will understand this process.


Xcode version: 4.6.1

SDK Version: 6.0

Baidu Map version: 1.2.2 (about the map does not have to tangle, whether it is the Baidu or the gold or Google are based on the system of Mapkit, are the same)

Demo mode: Non-arc, using storyboard.

Demo Resources:


Create demo, and add the static class library of Baidu map, Helloword can show Mapview

About this step I wrote a special tutorial, here is no longer to repeat, the same, about how to use the Bmkpointannotation add a marker, I will not say, if you do not even this, then go to the official website to see the basic tutorial.


Implement three delegate methods:

This method is similar to TableView add cell, is created annotation

[CPP] view plain copy #pragma mark #pragma mark-bmkmapview delegate-(Bmkannotationview *) Mapview: (BMKMAPVI EW *) Mapview viewforannotation: (id<bmkannotation>) annotation;

This method triggers when clicking on the map marker (and displays callout)
[CPP] view plain copy-(void) Mapview: (Bmkmapview *) Mapview Didselectannotationview: ( Bmkannotationview *) view;

This method in the click of a map anywhere, the equivalent of hiding callout

[CPP] view plain copy-(void) Mapview: (Bmkmapview *) Mapview Diddeselectannotationview: ( Bmkannotationview *) view;

Principle: The map of the marker is created in the viewforannoation, but also implied for us to create a calloutview, is the blow out of the box, but we do not see the source code. In fact, this blown out box (Calloutview) is also a annotation, will be created in Viewforannotation, his coordinates should be the same as the marker coordinates of this point, as long as the understanding of this, on the line, The marker and blown out boxes are two different annotation, they have the same coordinate.


Custom a annotation, in order to be simple and convenient, I directly inherited the Mapview from the bmkpointannotation, this is a classic Pushpin marker.

(Baidu Map, Gould Map, Google map) >
(Baidu Map, Gould Map, Google map) >

Here I have added a dictionary property, in order to customize the Calloutview blown out box to display the content assignment, will be understood.


Add a custom annotation to Mapview

[CPP] view Plain copy//Add custom annotation cllocationcoordinate2d center = {39.91669,116.39716};   Custompointannotation *pointannotation = [[Custompointannotation alloc] init]; Pointannotation.title = @ "I am Chinese";//Because Bmkpointannotation is inherited, these title,subtitle can be set pointannotation.subtitle = @ "      I love my own motherland ";   Pointannotation.coordinate = center;   [Mymapview addannotation:pointannotation]; [Pointannotation release];
In Viewforanntion, because I do not have much demand for marker, directly using the Bmkpinannotationview (Pushpin), simply set the Image property for the icon you want, as follows:

(Baidu Map, Gould Map, Google map) >
(Baidu Map, Gould Map, Google map) >

Show an effect chart:

(Baidu Map, Gould Map, Google map) >

(Baidu Map, Gould Map, Google map) >

Obviously Calloutview can only set title and subtitle, unable to meet our requirements, then continue to the next step.


Creates a annotation (custom calloutview) that is equivalent to displaying the annotation of the Calloutview.

[note] Inherit from nsobject<bmkannotation>


[CPP] view plain copy #import  <Foundation/Foundation.h>   #import   BMapKit.h "      @interface  calloutmapannotation : nsobject<bmkannotation >         @property   (nonatomic)  CLLocationDegrees latitude;    @property   (nonatomic)  CLLocationDegrees longitude;         @ Property (retain,nonatomic)  nsdictionary *locationinfo;//callout blown out box The information to display            -  (ID) initwithlatitude: (cllocationdegrees) Lat andlongitude: ( cllocationdegrees) lon;        

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.