多色谷歌地图SVG符号
Google地图标记可以将复杂的svg路径作为其图标,如下所示:多色谷歌地图SVG符号,svg,maps,Svg,Maps,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"],
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为绿色
注意,这个构造是从这里借来的:它工作得很好 说到不透明度,
strokeOpacity
是你的人。有关符号属性的更多信息,请查看。我刚刚做了同样的事情,我认为您必须使用基本相同的数据绘制两个标记,但是使用路径
,在本例中,填充颜色
属性已更改:
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,但你明白了。可能是重复的