新的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场地详细地图

回答

相关问题