在地图上添加POI（二）

在上一篇中实现一个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-1; h>-1; --h){
        for(int w=0; w<width; ++w){
            int pix = img.pixelColor(w, h).rgba();
            int pb = (pix >> 16) & 0xff;
            int pr = (pix << 16) & 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