前言
我們的APP是做房地產(chǎn)類诅炉，所以用戶有在地圖中根據(jù)區(qū)域，不同商圈屋厘，地鐵線路站牌來查看樓盤的需求涕烧。我們的功能就是在用戶進(jìn)入地圖頁時(shí)按區(qū)域顯示新樓盤或者二手房數(shù)量，用戶根據(jù)需要點(diǎn)擊區(qū)域進(jìn)入二級(jí)商圈顯示商圈內(nèi)樓盤數(shù)量汗洒，用戶點(diǎn)擊某個(gè)商圈進(jìn)入該商圈內(nèi)的樓盤位置視圖澈魄，樓盤標(biāo)注顯示樓盤信息，價(jià)格信息仲翎，點(diǎn)擊樓盤標(biāo)簽進(jìn)入詳情頁痹扇，功能效果可參考房天下的地圖模式。
地鐵模式：用戶選擇地鐵線或者站點(diǎn)溯香，在地圖上顯示地鐵線路標(biāo)注鲫构，站點(diǎn)標(biāo)注。點(diǎn)擊某個(gè)站點(diǎn)顯示附近樓盤標(biāo)注信息玫坛。
52E19613DD831D0961CD1BCBF73442F0.png
![Uploading 33C948F3F2B44F1084ED64A77BA8A4CE_098266.png . . .]
77A19972045653C1B7F2A9C49D980FFE.png
33C948F3F2B44F1084ED64A77BA8A4CE.png
AE5B8A54B4AD60A3A0FAEB1815B85DC9.png
6543E08D6CBAEAE5F86F5995F45B8C60.png
功能實(shí)現(xiàn)
1结笨、準(zhǔn)備
地圖：我們的APP是基于百度地圖的
后臺(tái)：需要分別返回區(qū)域，商圈湿镀，樓盤的接口炕吸。
2、實(shí)現(xiàn)
創(chuàng)建自定義的annotationview繼承于BMKAnnotationView
創(chuàng)建好對(duì)應(yīng)的model勉痴，存儲(chǔ)后臺(tái)返回的數(shù)據(jù)
剛進(jìn)入地鐵時(shí)默認(rèn)加載區(qū)域的標(biāo)注赫模。
//添加區(qū)域標(biāo)注
-(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];
}
實(shí)現(xiàn)百度地圖的代理方法
// 根據(jù)anntation生成對(duì)應(yīng)的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;
}
}
區(qū)域的標(biāo)注AreaAnnotationView 自定義視圖繼承于BMKAnnotationView
這樣區(qū)域的標(biāo)注就已經(jīng)加載完成。
下面實(shí)現(xiàn)點(diǎn)擊區(qū)域加載商圈的功能：
這里在區(qū)域標(biāo)注的點(diǎn)擊代理里實(shí)現(xiàn)
- (void)didSelectAreaAnnotationView:(UIView *)view{
//當(dāng)當(dāng)前的選擇點(diǎn)移到最前
UIView *tapDetectingView = view.superview;
[tapDetectingView bringSubviewToFront:view];
if([view isKindOfClass:[AreaAnnotationView class]]){
if (_isNewhouse) {
//統(tǒng)計(jì)
[MobClick event:@"searchNewHouseOnMap_bubble_arecaClickEvent"];
}else {
//統(tǒng)計(jì)
[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];
}
}
這里沒有做網(wǎng)絡(luò)請(qǐng)求的方法蒸矛，因?yàn)楸幌旅孢@個(gè)方法中替代了瀑罗，這個(gè)下面說
[_mapView setMapStatus:[BMKMapStatus statusWithCenterCoordinate:annotation.coordinate zoomLevel:15] withAnimation:YES];
商圈的加載和區(qū)域是一樣的胸嘴，這里就不再贅述了
這是mapView的代理方法，當(dāng)mapView的zoomLevel改變或者mapView的region發(fā)生改變是會(huì)調(diào)用斩祭，我們的加載數(shù)據(jù)請(qǐng)求是放在這里做的劣像，不同的地圖zoomlevel顯示不同標(biāo)注：
一般區(qū)域的標(biāo)注在地圖上顯示縮放水平為12、13級(jí)
商圈的標(biāo)注在地圖上顯示縮放水平為14摧玫、15級(jí)
樓盤耳奕，學(xué)校在地圖上顯示縮放水平為17級(jí)
據(jù)此我們可以根據(jù)不同的縮放水平來進(jìn)行不同的網(wǎng)絡(luò)請(qǐng)求
-(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];
}
}
這里我們?cè)賮碚f下這個(gè)方法
[_mapView setMapStatus:[BMKMapStatus statusWithCenterCoordinate:annotation.coordinate zoomLevel:15] withAnimation:YES];
進(jìn)到這個(gè)方法的定義內(nèi)：
/**
- 設(shè)置地圖狀態(tài)
- @param [in] mapStatus 地圖狀態(tài)信息
- @param [in] bAnimation 是否需要?jiǎng)赢嬓Ч瑃rue:需要做動(dòng)畫
*/
這是百度地圖提供的方法
我們需要做的是計(jì)算BMKMapStatus诬像；這個(gè)類包含這些屬性：
///縮放級(jí)別:[3~19]
@property (nonatomic, assign) float fLevel;
///旋轉(zhuǎn)角度
@property (nonatomic, assign) float fRotation;
///俯視角度:[-45~0]
@property (nonatomic, assign) float fOverlooking;
///屏幕中心點(diǎn)坐標(biāo):在屏幕內(nèi)吮铭，超過無效
@property (nonatomic) CGPoint targetScreenPt;
///地理中心點(diǎn)坐標(biāo):經(jīng)緯度
@property (nonatomic) CLLocationCoordinate2D targetGeoPt;
///當(dāng)前地圖范圍，采用直角坐標(biāo)系表示颅停，向右向下增長(zhǎng)
@property (nonatomic, assign, readonly) BMKMapRect visibleMapRect;
這里我們需要的就是縮放級(jí)別和地理中心點(diǎn)坐標(biāo):經(jīng)緯度
我們這里對(duì)做了一個(gè)類別并提供這個(gè)方法來計(jì)算這2個(gè)屬性
+ (BMKMapStatus *)statusWithCenterCoordinate:(CLLocationCoordinate2D )centerCoordinate
zoomLevel:(NSUInteger)zoomLevel;
這樣就可以當(dāng)?shù)貓D位置和縮放發(fā)生改變時(shí)被獲取到谓晌，去執(zhí)行代理方法。
這樣地圖3級(jí)顯示區(qū)域癞揉、商業(yè)纸肉、樓盤的功能就實(shí)現(xiàn)了。
下面再簡(jiǎn)單說下在地圖上畫地鐵的方法：
//畫地鐵
-(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];
//構(gòu)建BMKPolyline
BMKPolyline* polyline = [BMKPolyline polylineWithCoordinates:coords count:self.subWayArray.count];
//添加分段紋理繪制折線覆蓋物
[self.mapView addOverlay:polyline];
//設(shè)置地圖位置
[self mapViewFitPolyLine];
}
//根據(jù)地鐵點(diǎn)設(shè)置地圖位置
- (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;
}
就是簡(jiǎn)單的拿數(shù)據(jù)顯示喊熟，并沒有什么需要說的柏肪。地鐵站的標(biāo)注跟區(qū)域商圈一樣顯示。
感覺說的比較亂芥牌，如果有朋友做這方面的可以留言或者加我QQ聊烦味。
