Question

我正在从Font Awesome 4升级到Font Awesome 5，一切进展顺利。但是，我遇到的一个问题是我的Bing Maps实现。 Font Awesome 5利用不同的字体粗细来显示同一图标的不同版本。我想使用纯色版本，但Bing Maps图钉的默认字体粗细为“正常”（400），所以我在地图上得到的版本错误。

我正在使用具有所有可用选项的Pro版本，因此这就是为什么我需要区分Bing Maps实现的字体粗细的原因。（当然，否则，我只能引用字体图标的完整版本。）

这是我创建图钉的JavaScript函数：

CreateFontIconPushpin = function createFontPushpin(location, iconIndex, fontSizePx, color) {
    var text = mapSettings.mapIcons[iconIndex];
    var fontName = "'Font Awesome 5 Pro'";
    var c = document.createElement('canvas');
    var ctx = c.getContext('2d');

    //Define font style
    var font = fontSizePx + 'px ' + fontName;
    ctx.font = font

    //Resize canvas based on sie of text.
    var size = ctx.measureText(text);
    c.width = size.width;
    c.height = fontSizePx;

    //Reset font as it will be cleared by the resize.
    ctx.font = font;
    ctx.textBaseline = 'top';
    ctx.fillStyle = color;

    ctx.fillText(text, 0, 0);

    return new Microsoft.Maps.Pushpin(location, {
        icon: c.toDataURL(),
        anchor: new Microsoft.Maps.Point(c.width / 2, c.height / 2) //Align center of pushpin with location.
    });
}

我不知道这是否重要，但这是我正在处理的页面。 https://www.mshsaa.org/About/MemberSchools.aspx?view=map

谢谢。

Bing Maps和Font Awesome 5地图图标-Font-Weight

0 个答案: