在地图上添加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-; 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());

}