Многоцветная карта Google SVG Символы

Маркер Google Map может принимать сложный путь 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 будет зеленым.

Обратите внимание, что эта конструкция заимствована отсюда: Как указать прозрачность в пути SVG в Google Maps API версии 3?, и это работает хорошо.

Ответ 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.