在上一篇中实现一个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. ObjectCopy

    对象的传参用的是传引用,但开发中通常不允许对传入参数进行修改.因此对象拷贝很常用,Python提供一个很方便的对象拷贝方法 如代码: __author__ = 'mengxuan' import co ...

  2. STM32之SD卡

    目录 一.SD卡概述 1.定义 2.容量等级 3.SD卡框图 4.SD卡与TF卡的区别 二. SD卡内部结构 1. SD卡内部结构简图 2. 存储阵列结构图 3.Buffer 4.“存储阵列Block ...

  3. Python的数字类型及其技巧

    Python中的数字类型 int float fractions.Fraction decimal.Decimal 数字的舍与入 int(f):舍去小数部分,只保留整数部分,所以int(-3.8)的结 ...

  4. Python+django部署(一)

    之所以 写这篇文章的原因在于django环境的确轻松搭建,之前Ubuntu上安装了,的确很轻松,但是后期我才知道随便做个环境出来很容易到了后面很麻烦,污 染了系统里的python版本,导致系统pyth ...

  5. 3.2.3 使用Parameters动态生成where语句_JasperReports iRepor

    $P!{ParametersName}格式的SQL语句 来源:http://book.2cto.com/201306/24311.html#12732-hi-1-66926-020ef5b321fac ...

  6. XSS解决方案系列之四:关于编码

    本文准备说明以下几个问题: 1. 关于重复编码的问题 2. 关于编码的多种形式的问题 3. 关于编码的几个常见问题 [说明] 本文所述编码是指encode,可以理解为转义,而不是编程序写代码. 编码或 ...

  7. SDUT 2352 Run Length Encoding

    点我看题目 题意 :将给定的字符串编码,编码的规则根据两条,1.如果字符串里有连续相等的字符,就变为两个字符,一个是这些连续相同的字符的个数,另一个是这个字符,但是如果数量超过了9个,那就输出9再输出 ...

  8. 【NOIP2015 DAY1 T3 】斗地主(landlords)

    题目描述 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗地主中,牌的大小关系根据牌的数码表示如下:3<4< ...

  9. Linux下实现定时器Timer的几种方法

    http://blog.csdn.net/lxmky/article/details/7669296 第六章 IO复用:select和poll函数 http://www.cnblogs.com/4ti ...

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

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