谷歌地圖標記是否有可能在一個svg

Question

合併多個顏色，所以四天一直試圖做兩天現在是。

var arr = [ 
       { 
        path: "M239.68,331.38c34.206,58.142,87.12,150.48,87.12,150.48s49.609-84.922,88.56-149.76C327.52,275.94,241.84,326.34,239.68,331.38z", 
        fillColor: 'red', 
        fillOpacity: 1, 
        anchor: new google.maps.Point(0, 0), 
        strokeWeight: 0, 
        scale: .6, 
       }, 
       { 
        path: "M150 0 L75 200 L225 200 Z", 
        fillColor: 'black', 
        fillOpacity: 1, 
        anchor: new google.maps.Point(0, 0), 
        strokeWeight: 0, 
        scale: .6, 
       } 
       ]; 
       var marker = new google.maps.Marker({ 
        position: location, 
        map: map, 
        draggable: false, 
        icon: arr, 
        zIndex: -20, 

       }); 

所以基本上什麼IV一直試圖做的是通過組合兩個或兩個以上svgs，並將它作爲一個標記動態生成的SVG，這是可能的呢？有人知道嗎？我想要風格唯一重要的屬性是顏色，所以我有一個標記不止一種顏色。

Answer 1

在，你會看到你的「SVG符號」的HTML轉換爲實際的SVG

有可以使用，讓創建許多圖書館SVG的輕鬆一點，或者你可以學習如何直接創建它們javascript ...它比你想象的容易 - 但是我硬編碼它 - 你可以使用標準的DOM getElementById等輕鬆地改變SVG的顏色等 -

例如，看看原來的顏色是紅色和黑色的線條

document.getElementById('p1').setAttribute('fill','green'); 

集的紅色位綠色 -

var map; 
 
var polyLine; 
 
var polyOptions; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
     zoom: 5, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     center: new google.maps.LatLng(0,0) 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    
 
    google.maps.event.addListener(map, 'click', function(event) { 
 

 
     addPoint(event); 
 
    }); 
 
} 
 

 
function addPoint(event) { 
 
    document.getElementById('p1').setAttribute('fill','green'); 
 
\t var iconUrl = "data:image/svg+xml;charset=utf-8," + escape(document.getElementById("marker").innerHTML) 
 
    var icon = { 
 
     url: iconUrl, 
 
     anchor: new google.maps.Point(0,0), 
 
     scaledSize: new google.maps.Size(40,55) 
 
    } 
 

 
    var marker = new google.maps.Marker({ 
 
     position: event.latLng, 
 
     map: map, 
 
     draggable: false, 
 
     icon: icon, 
 
     zIndex : -20 
 
    }); 
 
} 
 

 
initialize();

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&x=.js"></script> 
 
<div id="map-canvas" style="height:400px"></div> 
 
<div id='marker' style='display:none'><svg 
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    width="110mm" height="150mm" 
 
    id="svg111" 
 
    version="1.1"> 
 
<path id="p1" 
 
    fill="red" 
 
    fill-opacity="1" 
 
    stroke-weight="0" 
 
    d="M239.68,331.38c34.206,58.142,87.12,150.48,87.12,150.48s49.609-84.922,88.56-149.76C327.52,275.94,241.84,326.34,239.68,331.38z" /> 
 
<path id="p2" 
 
    fill="black" 
 
    fill-opacity="1" 
 
    stroke-weight="0" 
 
    d="M150 0 L75 200 L225 200 Z" /> 
 
    </svg></div>