MKMapView的Span和Region深入分析

本文轉載自 http://www.it165.net/pro/html/201403/10827.html

很多人在第一次開發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(5062);
2.CLLocationCoordinate2D coordinate = CLLocationCoordinate2DMake(28104);
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];
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章