在上一篇中实现一个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. [python]filter

  2. jdk .tar.gz 包安装 inAction

    方法参考于http://blog.sina.com.cn/s/blog_81631744010137iy.html, 多谢博主分享,此处仅作为个人学习笔记. 首先将*.tar.gz解压 tar -xz ...

  3. SimpleMembership: The future of membership for ASP.NET

    http://weblogs.asp.net/jgalloway/archive/2012/08/29/simplemembership-membership-providers-universal- ...

  4. c/c++ 传统数组的缺点

    专题:  动态内存分配 (所有高级语言,没有C里深刻) 传统数组的缺点: 1.数组长度必须事先指定,而且只能是常整数,不能是变量     例子 ]; //必须事先指定,而且只能是常整数 ; int a ...

  5. nginx日志配置

    nginx日志配置 http://www.ttlsa.com/linux/the-nginx-log-configuration/ 日志对于统计排错来说非常有利的.本文总结了nginx日志相关的配置如 ...

  6. 一个简单的DDraw应用程序2

    //------------------------------------------------------------------------- // 文件名 : 6_1.cpp// 创建者 : ...

  7. [转贴]实践:C++平台迁移以及如何用C#做C++包装层

    终于有个C++ 如何调用C#类库的文章,收藏之 在前面,我们看过OpenTK与MOgre,这二个项目都是C#项目,但是他的实现都是C++.他们简单来说就是一个包装层.常见的包装方式有二种,一 种就是我 ...

  8. 驱动程序环境搭配(VS2010 + WDK + VirtualDDK + VMware)good

    http://www.cnblogs.com/BoyXiao/archive/2011/07/31/2122755.html

  9. Realm for Android快速入门教程

    介绍 如果你关注安卓开发的最新趋势,你可能已经听说过Realm.Realm是一个可以替代SQLite以及ORMlibraries的轻量级数据库. 相比SQLite,Realm更快并且具有很多现代数据库 ...

  10. Java中int与Integer

    一般小写字母开头的是数据类型(如int double),大写字母开头的一般是封装为类(如Double),里面有很多方法,比如实行转换Integer.parseInt(arg0),可以把其他类型的数据转 ...