對於谷歌地圖標記，可以在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

在html中，你會看到你的“svg符號”轉換為實際的SVG

您可以使用許多庫來創建SVG更容易，或者您可以學習如何直接在javascript中創建它...它比您想象的更容易 - 但我對它進行了硬編碼 - 您可以輕松更改SVG中的顏色使用標准DOM getElementById等 -

例如，看看原始顏色是紅色和黑色以及線條

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