腾讯地图SDK实现点击建筑显示围栏及建筑信息效果
时间:2022-07-23
本文章向大家介绍腾讯地图SDK实现点击建筑显示围栏及建筑信息效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
AOI(area of interest),也叫兴趣面,与POI类似。POI用于标记一个点,而AOI用于标记一个区域。在腾讯地图APP中点击建筑物,会使用轮廓线将该建筑物包围,同时显示建筑物的相关信息,如:名称、地址、距离、电话等等。如下图所示:
使用场景
点击地图中POI名称,显示该建筑的AOILayer,并且通过腾讯地图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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- spring之spring表达式语言:SpEL
- 反欺诈模型(数据不平衡)
- 基于TypeScript封装Axios笔记(一)
- 一次性清除“知乎”所有DIV
- spring之bean之间的关系
- spring之未加后置处理器的bean的生命周期
- linux之在centos7中配置java开发环境
- 秒懂java规则表达式框架Aviator2.3.0
- 细品Redis高性能数据结构之SDS
- linux之第一个shell程序
- pyspark之从HDFS上读取文件、从本地读取文件
- spring之使用外部属性文件(连接数据库时使用)
- 【python-leetcode92-翻转链表】反转链表2
- 细品Redis高性能数据结构之hash对象
- pyspark之常用算子