多色谷歌地圖SVG符號

Question

一個谷歌地圖標記可以採取一個複雜的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?它很好地工作。

Answer 1

說到不透明度，strokeOpacity是你的傢伙。檢查maps.Symbol class以獲取符號屬性的更多信息。

Answer 2

我只是做了同樣的事情，我認爲你必須吸取兩個標記具有基本相同的數據，但與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，但你明白了。