新的foursquare場地詳細地圖

我真的很喜歡foursquare設計場地細節視圖的方式。特別是地圖位置在「標題」中的視圖......它是如何完成的？詳細信息顯然是一些uiscrollview（也許uitableview？）和它後面（在標題中）有一張地圖，所以當你滾動地圖是因爲滾動視圖反彈beeing ...沒有人有一個想法如何做到這一點？新的foursquare場地詳細地圖

enter image description here

來源

2012-06-11 animal_chin

我編輯了我的答案，現在的實現是完美的;） – yonel

這是我設法複製的方式： -

你需要一個UIViewController與UIScrollView作爲其視圖。然後，UIView你添加到您的滾動視圖內容應該是這樣的： -

enter image description here - 的的MKMapView框架有負面y位置。在這種情況下，我們只能看到默認狀態（拖動之前）的地圖的100pts。
- 您需要禁用縮放和滾動MKMapView實例。

然後，訣竅是向下移動MKMapView的centerCoordinate，並調整其中心位置。

爲此，我們計算出有多少1點爲增量緯度代表，讓我們知道中心的地圖多少座標應該被移到屏幕上被拖動的X點的時候： -

- (void)viewDidLoad { 
    [super viewDidLoad]; 
    UIScrollView* scrollView = (UIScrollView*)self.view; 
    [scrollView addSubview:contentView]; 
    scrollView.contentSize = contentView.frame.size; 
    scrollView.delegate = self; 
    center = CLLocationCoordinate2DMake(43.6010, 7.0774); 
    mapView.region = MKCoordinateRegionMakeWithDistance(center, 1000, 1000); 
    mapView.centerCoordinate = center; 
    //We compute how much latitude represent 1point. 
    //so that we know how much the center coordinate of the map should be moved 
    //when being dragged. 
    CLLocationCoordinate2D referencePosition = [mapView convertPoint:CGPointMake(0, 0) toCoordinateFromView:mapView]; 
    CLLocationCoordinate2D referencePosition2 = [mapView convertPoint:CGPointMake(0, 100) toCoordinateFromView:mapView]; 
    deltaLatFor1px = (referencePosition2.latitude - referencePosition.latitude)/100; 
}

一旦這些屬性被初始化，我們需要實現UIScrollViewDelegate的行爲。當我們拖動時，我們將以點表示的移動轉換爲緯度。然後，我們使用這個值的一半來移動地圖的中心。

- (void)scrollViewDidScroll:(UIScrollView *)theScrollView { 
    CGFloat y = theScrollView.contentOffset.y; 
    // did we drag ? 
    if (y<0) { 
     //we moved y pixels down, how much latitude is that ? 
     double deltaLat = y*deltaLatFor1px; 
     //Move the center coordinate accordingly 
     CLLocationCoordinate2D newCenter = CLLocationCoordinate2DMake(center.latitude-deltaLat/2, center.longitude); 
     mapView.centerCoordinate = newCenter; 
    } 
}

你得到相同的行爲Foursquare應用程序（但更好：在Foursquare應用程序，地圖recenter趨於跳，在這裏，改變中心順利完成）。上述

來源

2012-06-27 19:32:57 yonel

哇，這是驚人的答案......非常感謝！當標記爲已解決時，對不起延遲 - 我正在度假......反正......我實際上是在一段時間後自己製作的，它與您的解決方案類似......唯一的區別是，當我滾動時，我刷新了整個mapView，它設置了新的可見區域（如果你滾動很多地圖縮放）...我喜歡你的解決方案，只需設置新的地圖中心，它的方式遠快於我的解決方案，所以我會更新我的代碼...再一次感謝一大堆！ :) –

你能解釋一下你如何計算viewDidLoad中的deltaLatFor1px，尤其是referencePosition。我的代碼崩潰了，說有無效的地理座標有問題。謝謝！ – MrBr

其實我正在做的是我創建兩個屏幕位置，他們之間有100px。然後我將這些屏幕位置轉換爲地圖位置。然後我知道100px代表了多少緯度。然後很容易知道1px表示緯度的多少（兩個屏幕位置之間的delta緯度除以100）。 – yonel

的例子是很好的。如果您需要更多幫助，我認爲他們正在使用與RBParallaxTableViewController非常相似的東西。 https://github.com/Rheeseyb/RBParallaxTableViewController

它與Path用於標題照片的效果基本相同。

來源

2012-07-10 17:02:29 user1218464

Yonel的回答很好，但我發現一個問題，因爲我在地圖中心有一個針。因爲負數Y，該點隱藏在我的UINavigationBar下。

然後，我沒有設置負Y，並根據滾動偏移量更正了我的mapView.frame。

我MapView的是320×160

_mapView.frame = CGRectMake(0, 160, 320, -160+y);

希望這可以幫助別人。

來源

2014-05-23 02:32:05

新的foursquare場地詳細地圖

回答

相關問題