前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >腾讯地图SDK实现点击建筑显示围栏及建筑信息效果

腾讯地图SDK实现点击建筑显示围栏及建筑信息效果

作者头像
腾讯位置服务
发布2020-08-14 12:16:47
1.2K0
发布2020-08-14 12:16:47
举报
文章被收录于专栏:腾讯位置服务腾讯位置服务

前言

AOI(area of interest),也叫兴趣面,与POI类似。POI用于标记一个点,而AOI用于标记一个区域。在腾讯地图APP中点击建筑物,会使用轮廓线将该建筑物包围,同时显示建筑物的相关信息,如:名称、地址、距离、电话等等。如下图所示:

使用场景

点击地图中POI名称,显示该建筑的AOILayer,并且通过腾讯地图SDK的检索功能获取该建筑物的相关信息。

准备

1、腾讯地图3D SDK

2、AOILayer

3、地点检索

核心代码

1、监听点击POI的回调,获取POI信息:

代码语言:txt
复制
  - (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

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 使用场景
  • 准备
  • 核心代码
  • 示例:创建腾讯北京总部大楼的AOILayer
  • 点评
  • 链接
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档