在上一篇中实现一个icon + label的Marker需要使用两个Tangram的Marker, 今天分析了Tangram的源码后, 发现Tangram时支持单一Marker同时显示的, 这需要使用嵌套的Style。

上一篇使用的Style是两个:

 style: points,
color: white,
size: [32px, 32px],
order: 100,
collide: false

text:
text_source: function(){ return "label"},
priority: 100

但其实points style支持text属性, 两个合并后变成:

style: points,
color: white,
size: [32px, 32px],
order: 100,
collide: false,
text:
text_source: 'function(){ return \"Title\"}',
priority: 100

代码如下

void MarkerImpl::createMarker(const std::string &iconURI, const std::string &title)
{
QImage img(QString(iconURI.c_str()));
int width = img.width();
int height = img.height();
auto argb = new unsigned int [width * height];
for(int h=height-; h>-; --h){
for(int w=; w<width; ++w){
int pix = img.pixelColor(w, h).rgba();
int pb = (pix >> ) & 0xff;
int pr = (pix << ) & 0x00ff0000;
int pix1 = (pix & 0xff00ff00) | pr | pb;
argb[w + h*width] = pix1;
}
}
m_map->markerSetBitmap(m_ID, width, height, argb);
delete[] argb; static const char* MARKER_STYLE_TEMPLATE =
"{ style: 'points',"
" color: 'white',"
" size: [%1px, %2px],"
" order: 100,"
" collide: false,"
" text: {"
" text_source: 'function(){ return \"%3\"}',"
" priority: 100 } }";
QString iconStyle = QString(MARKER_STYLE_TEMPLATE).arg(width).arg(height).arg(title.c_str());
m_map->markerSetStyling(m_ID, iconStyle.toStdString().c_str());
}

这里使用了单行YAML的写法, 详见http://baike.baidu.com/link?url=oZjxiBc2gjv6W4Kx3UpMIjzsBhmmY2MJ9VayYJx-1qAZZiN_R16J2H8mMXH0j2a-eYwjiOI5zkKcy1ehSF8WIK#2_2

在地图上添加POI(二)的更多相关文章

  1. 在地图上添加POI

    使用Tangram的Marker, 可以在地图上做各种标记, 效果图: Tangram是通过Marker在地图上添加标记的,Marker分Point, Polyline和Polygon三种, 分别对应 ...

  2. 【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

    原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...

  3. 【百度地图API】建立全国银行位置查询系统(三)——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

  4. GMap.Net开发之在地图上添加多边形

    上一篇介绍了在GMap上添加自定义标签(GMapMarker),这篇介绍在GMap上添加多边形(GMapPolyogn),并且介绍如何在地图上画任意的多边形. 如果已经知道了多边形的各个点的位置,就可 ...

  5. google maps js v3 api教程(2) -- 在地图上添加标记

    原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...

  6. 微信小程序--地图上添加图片

    如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...

  7. 利用WPF建立自己的3d gis软件(非axhost方式)(四)在地图上添加FrameworkElement

    原文:利用WPF建立自己的3d gis软件(非axhost方式)(四)在地图上添加FrameworkElement 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUw ...

  8. Google Map API v2 (三)----- 地图上添加标记(Marker),标记info窗口,即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

  9. ArcGIS 在地图上添加标注

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 转 mysql 中sql 语句查询今天、昨天、7天、近30天、本月、上一月 数据

    转自 http://blog.csdn.net/ve_love/article/details/19685399

  2. Swift lazy 修饰符和方法

    LAZY 修饰符和 LAZY 方法 由 王巍 (@ONEVCAT) 发布于 2015/10/07 延时加载或者说延时初始化是很常用的优化方法,在构建和生成新的对象的时候,内存分配会在运行时耗费不少时间 ...

  3. android中监听layout布局

    android开发可以对layout文件夹中的xml文件里的布局进行监听,并处理事件,如:对RelativeLayout,LinearLayout,FrameLayout,GridLayout等布局容 ...

  4. IOS webview中cookie的读取与保存-b

    Cookie 的读取 将它放在 webViewDidFinishLoad 开始后执行 NSArray *nCookies = [[NSHTTPCookieStorage sharedHTTPCooki ...

  5. 推荐几款jQuery表格插件

    平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...

  6. IntelliJ IDEA SVN的账号修改 信息清除

    来到编译器的setting设置 搜索subversion 点击subversion 找到下面的clear auth...按钮,点击一下 就可以了

  7. Android 小知识点(持续更新)

    ①文件保存默认是private权限. ②在layout的xml文件中onClick的方法中包含一个View类型的参数 ③获取项目下files路径:Context.getFilesDir(); ④获取项 ...

  8. Android 拖动条(SeekBar)实例 附完整demo项目代码

    1.拖动条的事件 实现SeekBar.OnSeekBarChangeListener接口.需要监听三个事件:数值改变(onProgressChanged)开始拖动(onStartTrackingTou ...

  9. [OJ] Permutation Index

    LintCode 197. Permutation Index (Easy) LintCode 198. Permutation Index II (Medium) 感觉这两道题主要考察计算排列组合的 ...

  10. android 使用android.support.v7 添加ActionBar

    当需要在 android 7或更高的版本使用 ActionBar,则可以通过继承ActionBarActivity来实现, 网上有一个开源项目来兼容老版本显示ActionBar的效果:ActionBa ...