更改Bing Maps V8 ajax控件的内联svg的文本颜色

时间:2016-10-14 21:01:17

标签: bing-maps bing-api

在此示例中:https://blogs.bing.com/maps/May-2016-(1)/Pushpin-Clustering-in-Bing-Maps-V8。我想将显示聚集图钉数量的白色更改为不同的颜色。尝试下面的代码,但它没有奏效。有没有其他方法可以改变它?

cluster.setOptions({
            icon: svgString,
            anchor: new Microsoft.Maps.Point(radius, radius),
            textOffset: new Microsoft.Maps.Point(0, radius - 8),
            color: Microsoft.Maps.Color.fromHex('#111111') 
        });

1 个答案:

答案 0 :(得分:2)

颜色图钉选项会更改默认图钉的颜色。没有选项可以更改文本值的颜色,但由于您使用的是内联SVG,因此可以很容易地在内联SVG中执行此操作。您可以在SVG中包含“{color}”占位符,它将替换为您在图钉颜色选项中指定的颜色。这是一个例子:

var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><circle cx="15" cy="15" r="13" style="stroke:orange;stroke-width:2;fill:yellow;"/><text x="10" y="20" style="fill:{color};">{text}</text></svg>';

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), { 
    icon: svg.replace('{text}', 'hi'),
    anchor: new Microsoft.Maps.Point(15, 15),
    color: 'red'
    });