Question

我正在尝试使内联SVG在Google标记上正常工作，我的代码可以正常工作，但当我尝试使用十六进制代码在SVG形状之一上设置填充时除外。以下函数返回一个SVG，代表我们要使用的标记：

function createPin(segmentDetail, lat = 0, long = 0) {
    const colour = segmentDetail.colour.toString().trim().toUpperCase();
    if (segmentDetail.colour) {
        return 'data:image/svg+xml;utf-8, \
        <svg width="48" height="48" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"> \
            <circle cx="16" cy="16" r="11" style="stroke:white;stroke-width:2;fill:transparent;" /> \
            <circle cx="16" cy="16" r="11" fill="' + colour + '" /> \
            <path fill="white" d="' + segmentDetail.icon + '" ></path> \
        </svg>';
    }
}

在第二个圆上：<circle cx="16" cy="16" r="11" fill="' + colour + '" />我们要基于单独的属性设置颜色，该属性在放置标记时确定。如果我使用文字格式的颜色，例如：

<circle cx="16" cy="16" r="11" fill="black" />

我们出现一个黑圈，一切正常：

但是，如果我将其替换为十六进制代码，它将停止工作，并且我不知道如何解决此问题。我尝试将黑色设置为另一个字符串“ findme”，然后在其上使用正则表达式替换，然后再在映射代码中分配图标，但这是行不通的。

有人碰到这个吗？

这是我映射标记的方式：

const icon = {
    url: createPin(_mapData[index][i]),
    fillColor: '#FFFFFF',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
};

markers[i] = new google.maps.Marker({
    position: {
        lat: _mapData[index][i].coordinate[1],
        lng: _mapData[index][i].coordinate[0]
    },
    icon: icon,
    map: googleLayers[encodedIndex].map,
    zIndex: (encodedIndex.trim().toUpperCase() !== 'BASE') ? baseZ + 10 : baseZ
});

Answer 1

如geocodezip所述，您必须转义＃（对于以前不曾想过的人，我是骨子里的骨头），当您在十六进制代码上使用encodeURIComponenent时，它会解决并解决问题。

如果有人遇到此问题，以供将来参考，标记映射代码将变为：

function createPin(segmentDetail, lat = 0, long = 0) {
    const colour = segmentDetail.colour.toString().trim().toUpperCase();
    if (segmentDetail.colour) {
        return 'data:image/svg+xml;utf-8, \
            <svg width="48" height="48" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"> \
                <circle cx="16" cy="16" r="11" style="stroke:white;stroke-width:2;fill:transparent;" /> \
                <circle cx="16" cy="16" r="11" fill="' + encodeURIComponent(colour) + '" /> \
                <path fill="white" d="' + segmentDetail.icon + '" ></path> \
            </svg>';
    }
}

Google Maps-SVG标记问题

1 个答案: