多色谷歌地图 SVG 符号答案

【问题标题】：Multi-colored Google Map SVG Symbols多色谷歌地图 SVG 符号
【发布时间】：2013-01-25 02:14:41
【问题描述】：

Google 地图标记可以采用复杂的 svg 路径作为其图标，如下所示：

var baseSvg = {
    x1 : "m 0,0 l45,0 l 190,225 l -45,0 l -190,-225 z",
    x2 : "m 225,0 l -45,0 l -190,225 l 45,0 l 190,-225 z"                
};

var baseIcon = {
    path: "M0,0 " + baseSvg["x1"] + baseSvg["x2"],
    fillColor: "#000000",
    fillOpacity: 1,
    scale: .2,
    strokeColor: "black",
    strokeWeight: 0,
    rotation: 15
};

然后将其输入标记：

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(somelat, somelng),
    icon: baseIcon 
});

一切都好。但它只绘制单一颜色（本例中为黑色）。 那么，它们可以只有一种颜色还是有多种颜色的符号？ 使用示例代码，x1 为红色，x2 为绿色。

请注意，这个结构是从这里借来的：How do I indicate transparency in an SVG path in Google Maps API v3?，它工作得很好。

【问题讨论】：

Creating a multi color svg icon for google map marker的可能重复

标签： svg maps

【解决方案1】：

我只是做了同样的事情，我认为您必须使用基本相同的数据绘制两个标记，但 path 和在本例中的 fillColor 属性已更改：

var baseSvg = {
        x1 : "m 0,0 l45,0 l 190,225 l -45,0 l -190,-225 z",
        x2 : "m 225,0 l -45,0 l -190,225 l 45,0 l 190,-225 z"                
    },
    baseIcon = {
        fillOpacity: 1,
        scale: .2,
        strokeColor: "black",
        strokeWeight: 0,
        rotation: 15
    },
    markerPos = new google.maps.LatLng(somelat, somelng),
    // psuedo code for cloning an object since that 
    // is out of scope for this question
    greenIcon = Object.clone(baseIcon),
    redIcon = Object.clone(baseIcon);

greenIcon.path = baseSvg.x1;
greenIcon.fillColor = "#0f0";
redIcon.path = baseSvg.x2;
redIcon.fillColor = "#f00";

var marker1 = new google.maps.Marker({
    position: markerPos,
    map: map,
    icon: greenIcon
});
var marker2 = new google.maps.Marker({
    position: markerPos, 
    map: map,
    icon: redIcon
});

显然没有优化 js，但你明白了。

【讨论】：

【解决方案2】：

谈到不透明度，strokeOpacity 是您的理想选择。查看maps.Symbol class 了解有关符号属性的更多信息。

【讨论】：