騰訊位置服務地圖SDK是一套提供多種地理位置服務的應用程式介面。通過調用該介面,開發者可以在自己的應用中加入地圖相關的功能(如地圖展示、標註、繪製圖形等),輕鬆訪問騰訊地圖服務和數據,構建功能豐富、交互性強、符合各種行業場景的地圖類應用程式。 以下內容轉載自iOS 工程師Genosage的文章《地圖 ...
騰訊位置服務地圖SDK是一套提供多種地理位置服務的應用程式介面。通過調用該介面,開發者可以在自己的應用中加入地圖相關的功能(如地圖展示、標註、繪製圖形等),輕鬆訪問騰訊地圖服務和數據,構建功能豐富、交互性強、符合各種行業場景的地圖類應用程式。
以下內容轉載自iOS 工程師Genosage的文章《地圖 SDK 系列教程-在地圖上展示指定區域》
作者:Genosage
鏈接:https://juejin.im/post/5d721a29f265da03970bdc8d
來源:掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
地圖SDK系列教程-在地圖上展示指定區域
在使用騰訊 iOS 地圖 SDK 的過程中,經常會遇到需要地圖展示指定區域的場景,相信大家也會遇到類似的情況,地圖 SDK 提供了許多與之相關的介面,本篇文章將對這些介面進行整合,並提供示例代碼來實現多個場景下展示指定區域的需求。
需要註意,本篇文章適用於地圖未發生旋轉與俯仰角的場景。
下載騰訊 iOS 地圖 SDK 請前往:iOS 地圖 SDK
指定區域包含單個坐標點
在地圖上顯示某個固定的坐標點是地圖 SDK 最為基礎的功能之一。
舉例來說,我們根據 SDK 的檢索功能得到了天壇公園的坐標 (39.881190,116.410490),接下來,我們可以通過設置地圖的中心點 centerCoordinate
來讓地圖顯示這個坐標,同時我們還可以設置 zoomLevel
來指定縮放級別:
// 設置中心點 self.mapView.centerCoordinate = CLLocationCoordinate2DMake(39.881190,116.410490); // 設置縮放級別 self.mapView.zoomLevel = 15;
顯示效果如下:
如果想展示墨卡托坐標點 QMapPoint
則需要先通過方法 QCoordinateForMapPoint(QMapPoint mapPoint)
將墨卡托坐標轉換為經緯度再進行設置。
指定區域包含多個坐標點
現在,假如我們想把天壇公園的搜索結果都顯示在地圖上,應該如何實現呢?
首先,我們通過檢索功能搜索天壇公園,取搜索結果的前九個坐標點,接下來,應該使我們的地圖視野包含這九個坐標點,地圖 SDK 提供了方法 QBoundingCoordinateRegionWithCoordinates(CLLocationCoordinate2D *coordinates, NSUInteger count)
來計算多個經緯度坐標點的最小外接矩形 QCoordinateRegion
在得到了外接矩形之後,我們可以直接設置地圖的 region
來使其顯示我們想要的區域,完整代碼如下:
CLLocationCoordinate2D coordinates[9]; // 天壇公園檢索結果坐標 coordinates[0] = CLLocationCoordinate2DMake(39.881190,116.410490); coordinates[1] = CLLocationCoordinate2DMake(39.883247,116.400063); coordinates[2] = CLLocationCoordinate2DMake(39.883710,116.412900); coordinates[3] = CLLocationCoordinate2DMake(39.883654,116.412863); coordinates[4] = CLLocationCoordinate2DMake(39.883320,116.400040); coordinates[5] = CLLocationCoordinate2DMake(39.876980,116.413190); coordinates[6] = CLLocationCoordinate2DMake(39.878160,116.413140); coordinates[7] = CLLocationCoordinate2DMake(39.878980,116.407080); coordinates[8] = CLLocationCoordinate2DMake(39.878560,116.413160); // 計算區域外接矩形 QCoordinateRegion region = QBoundingCoordinateRegionWithCoordinates(coordinates, 9); // 設置區域 self.mapView.region = region;
顯示效果如下:
指定中心點
如果我們想顯示這九個坐標點的同時指定某個坐標點為地圖中心點,可以使用方法 QBoundingCoordinateRegionWithCoordinatesAndCenter(CLLocationCoordinate2D *coordinates, NSUInteger count, CLLocationCoordinate2D centerCoordinate)
來計算最小外接矩形,以天壇公園為中心點舉例,相關代碼如下:
// 中心點坐標 CLLocationCoordinate2D centerCoordinate = CLLocationCoordinate2DMake(39.881190,116.410490); // 計算以中心點為中心的區域外接矩形 QCoordinateRegion region = QBoundingCoordinateRegionWithCoordinatesAndCenter(coordinates, 9, centerCoordinate); // 設置區域 self.mapView.region = region;
顯示效果如下:
嵌入四周邊界
如果需要在地圖視野四周嵌入一些邊界,可以使用方法 - (void)setRegion:(QCoordinateRegion)region edgePadding:(UIEdgeInsets)insets animated:(BOOL)animated
對地圖的 region
進行設置,代碼如下:
// 計算區域外接矩形 QCoordinateRegion region = QBoundingCoordinateRegionWithCoordinates(coordinates, 9); // 設置區域與邊界 [self.mapView setRegion:region edgePadding:UIEdgeInsetsMake(20, 20, 20, 20) animated:NO];
顯示效果如下:
墨卡托坐標點
如果需要展示多個墨卡托坐標點,可以使用地圖 SDK 提供的與上述方法對應的 QBoundingMapRectWithPoints(QMapPoint *points, NSUInteger count)
和 - (void)setVisibleMapRect:(QMapRect)mapRect edgePadding:(UIEdgeInsets)insets animated:(BOOL)animated
等方法。
折線與覆蓋物
當我們想在地圖中展示路線或者覆蓋物時,即地圖 SDK 中的 QPolyline
QPolygon
和 QCircle
,我們可以直接獲得他們的屬性 boundingMapRect
再進行設置即可。
指定區域包含多個標註
在很多場景下,我們需要在地圖上添加標註點 (Annotation) 並且自定義這些標註的 Image,如下所示:
我們可以通過下麵的代碼來使這些標註剛好顯示在地圖視野內:
// 計算包含 Annotation 與 MapRect 的外接矩形 QMapRect rect = [self.mapView mapRectThatFits:QMapRectNull containsCalloutView:NO annotations:self.annotations edgePadding:UIEdgeInsetsZero]; // 設置區域 self.mapView.visibleMapRect = rect;
顯示效果如下:
當標註顯示 Callout View 時,我們可以通過傳入參數 bContainsCalloutView
為 YES 來將 Callout View 包含在地圖視野內,顯示效果如下:
有時我們需要指定區域同時包含當前的屏幕視野以及所有的標註,我們可以通過傳入第一個參數 mapRect
為 self.mapView.visibleMapRect
來達到我們想要的效果。
限制展示指定的區域
當我們需要限制地圖視野,使其只顯示我們指定的區域時,以故宮舉例,可以通過如下的代碼進行設置:
CLLocationCoordinate2D coordinates[4]; // 故宮範圍矩形的四個頂點的經緯度坐標 coordinates[0] = CLLocationCoordinate2DMake(39.922878,116.391547); coordinates[1] = CLLocationCoordinate2DMake(39.912917,116.392100); coordinates[2] = CLLocationCoordinate2DMake(39.913312,116.402507); coordinates[3] = CLLocationCoordinate2DMake(39.923277,116.402024); // 計算區域外接矩形 QCoordinateRegion region = QBoundingCoordinateRegionWithCoordinates(coordinates, 4); // 計算平面投影矩形 QMapRect rect = QMapRectForCoordinateRegion(region); // 限制展示區域 [self.mapView setLimitMapRect:rect mode:QMapLimitRectFitWidth];
顯示效果如下: