前言

AOI（area of interest），也叫興趣面，與POI類似。POI用於標記一個點，而AOI用於標記一個區域。在騰訊地圖APP中點選建築物，會使用輪廓線將該建築物包圍，同時顯示建築物的相關資訊，如：名稱、地址、距離、電話等等。如下圖所示：

使用場景

點選地圖中POI名稱，顯示該建築的AOILayer，並且通過騰訊地圖SDK的檢索功能獲取該建築物的相關資訊。

準備

1、騰訊地圖3D SDK

2、AOILayer

3、地點檢索

核心程式碼

1、監聽點選POI的回撥，獲取POI資訊：

  - (void)mapView:(QMapView *)mapView didTapPoi:(QPoiInfo *)poi {
      // 判斷點選的是否為同一個POI，如果相同，則移除當前AOILayer
      if (_poiName != nil && [_poiName isEqualToString:poi.name]) {
          _poiName = nil;
          [self removeAoiLayer];
          return;
      }
      
      _poiName = poi.name;
      QMSPoiSearchOption *option = [[QMSPoiSearchOption alloc] init];
      option.keyword = poi.name;
      // 檢索固定在北京，如果北京沒有檢索到則自動擴充套件區域
      [option setBoundaryByRegionWithCityName:@"北京" autoExtend:YES center:poi.coordinate];
      // 發起檢索
      [self.mapSearcher searchWithPoiSearchOption:option];
  }
 

2、監聽檢索回撥，獲取該POI的id值。檢索可能返回多個POI資料，這裡預設取出第一條與當前點選POI最相近的：

  - (void)searchWithPoiSearchOption:(QMSPoiSearchOption *)poiSearchOption didReceiveResult:(QMSPoiSearchResult *)poiSearchResult {
    
    // 解析出POI的id
    if (poiSearchResult.dataArray.count > 0) {
        QMSPoiData *data = poiSearchResult.dataArray.firstObject;
        if (data.id_ != nil && data.id_.length > 0) {
            _poiData = data;
            _poiId = data.id_;
            // 建立AOILayer
            [self createAoiLayer];
        }
    }
}
 

3、建立AOILayer：

_aoiLayer = [[QAOILayer alloc] initWithUID:_poiId];

[self.mapView addAOILayer:_aoiLayer callback:^(BOOL success) {
if (success) {
  NSLog(@"新增成功");
} else {
  NSLog(@"新增失敗");
}
}];

以上就是核心程式碼，在Demo中添加了用於顯示資訊的資訊面板以及定位功能，有興趣的同學可以在文章最下方進入我的碼雲下載完整示例。

示例：建立騰訊北京總部大樓的AOILayer

點評

該功能目前還有些許不足之處，比如：

1、有些POI並沒有生成AOI資訊，同時可能由於資料保密的原因，構成AOI面的座標點並沒有公開。

2、AOI的圖示、輪廓暫時無法更換，如果背景如上圖所示的綠色，那麼輪廓線很容易跟背景混淆。

3、POI檢索出來的資訊還是比較有限的。

連結

感興趣的同學可以在碼雲中下載Demo嘗試一下。

以上內容轉載自麵糊的文章《模仿騰訊地圖APP點選建築效果》

連結：https://www.jianshu.com/p/8ab02aa1d058

來源：簡書

著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。