Маркер 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?, и это работает хорошо.