MKMapView的Span和Region深入分析-CSDN博客

很多人在第一次开发iPhone应用遇到地图库的时候，都会有这样一个问题，iOS库中MKMapView没有zoomLevel这样的概念，替代的是MKCoordinateSpan和MKCoordinateRegion，那他们究竟代表什么意思呢？如何使用呢？我上网搜索了好久，也没有人说的很明白，解释的很详细。

后来应用都上架了很久，才弄清楚这两个结构体的真正含义。我们来先看看苹果官方文档的解释。

大概意思就是region表示地图中的一块区域，它有两个字段一个是center，就是这块区域中心点的经纬度；另一个是span，看下面解释。

大概意思就是span表示的是regoin的范围。它有两个字段一个是latitudeDelta，表示纬度范围，南纬和北纬加一起应该有180 度，所以它的范围应该是大于0度，小于等于180度；另一个是longitudeDelta，表示经度范围，东经和西经加一起应该有360度，所以它的范围应该是大于0度，小于360度。

看完了上面的解释其实还不是很理解，需要用代码来验证一下上面的解释。那我就举一个例子，让地图正好显示中国地图全部。

我们先来看看中国地图的经纬度范围，百度搜索“中国经纬度范围”，得出如下结果。

我们去掉其中的分值，可以得到：

中国中心点的纬度是（3 + 53）/ 2 = 北纬28度

中国中心点的经度是（73 + 135）/ 2 = 东经104度

中国纬度跨度是53 - 3 = 50度

中国经度跨度是135 - 73 = 62度

 
    1. 
    MKCoordinateSpan span = MKCoordinateSpanMake(50, 62); 
   
    2. 
    CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(28, 104); 
   
    3. 
    MKCoordinateRegion regoin = MKCoordinateRegionMake(coordinate, span); 
   
    4. 
    [self.mapView setRegion:regoin animated:YES];

模拟器的运行效果如下：

如上图，正好显示了中国整个地图全景，但是和我们设定的值不是太一样，中心点的值是没问题，主要是 self.mapView.region.span.latitudeDelta＝ 74.330273，并不是我们预设的50度，这是因为中国地图比较宽，而iPhone手机是竖条状的，为了适应经度范围，纬度范围被放大了。

当理解了latitudeDelta和longitudeDelta这两个值的含义后，就可以知道地图当前显示区域1度包含多少个像素，我们就可以随意按像素来移动地图。

 
    01. 
    CGFloat offsetXPixel = -50; // 让地图向右移动50像素 
   
    02. 
    CGFloat offsetYPixel = 100; // 让地图向下移动100像素 
   
    03. 
      
    04. 
    // 一个纬度单位包含几个像素 
   
    05. 
    CGFloat pixelsPerDegreeLat = self.mapView.frame.size.height / self.mapView.region.span.latitudeDelta; 
   
    06. 
      
    07. 
    // 一个经度单位包含几个像素 
   
    08. 
    CGFloat pixelsPerDegreeLon = self.mapView.frame.size.width / self.mapView.region.span.longitudeDelta; 
   
    09. 
      
    10. 
    // 把要移动的像素值换算成度数 
   
    11. 
    CLLocationDegrees offsetLonDegree = offsetXPixel / pixelsPerDegreeLon; 
   
    12. 
    CLLocationDegrees offsetLatDegree = offsetYPixel / pixelsPerDegreeLat; 
   
    13. 
      
    14. 
    // 不改变map的span值，只移动coordiante，这样地图不会放大缩小，只是平移 
   
    15. 
    CLLocationCoordinate2D coordinate = { 
   
    16. 
    self.mapView.region.center.latitude + offsetLatDegree, 
   
    17. 
    self.mapView.region.center.longitude + offsetLonDegree 
   
    18. 
    }; 
   
    19. 
      
    20. 
    [self.mapView setCenterCoordinate:coordinate animated:YES];