Multi-màu Google Map SVG Biểu tượng

Question

Một marker Google Map có thể mất một con đường svg phức tạp như biểu tượng của nó như trong một cái gì đó như:

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 
}; 

mà sau đó được đưa vào một điểm đánh dấu:

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

Tất cả đều tốt. Nhưng nó chỉ vẽ bằng một màu duy nhất (màu đen trong ví dụ này). Vì vậy, họ có thể chỉ có một màu duy nhất hoặc có cách nào để có biểu tượng nhiều màu không? Sử dụng mã ví dụ, x1 sẽ có màu đỏ và x2 sẽ có màu xanh lục.

Lưu ý rằng cấu trúc này được mượn từ đây: How do I indicate transparency in an SVG path in Google Maps API v3? và nó hoạt động độc đáo.

Answer 1

Khi nói đến độ mờ đục, strokeOpacity là anh chàng của bạn. Kiểm tra maps.Symbol class để biết thêm thông tin về các thuộc tính biểu tượng.

Answer 2

tôi chỉ làm điều tương tự và tôi nghĩ rằng bạn phải vẽ hai điểm đánh dấu với các dữ liệu cơ bản giống nhau, nhưng với sự path và trong trường hợp này fillColor tính thay đổi:

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 
}); 

rõ ràng js không được tối ưu hóa, nhưng bạn Có được ý tưởng.