GoogleMaps SVG標記fillColor

我目前正試圖改變一個存在的標記的顏色。GoogleMaps SVG標記fillColor

這裏是我的javascript代碼：

$(".etablissement").mouseenter(function() { 
     var currentMarker = oMarkers[$(this).data("type")+"-"+$(this).data("id")]; 
     var currentIcon = currentMarker.getIcon(); 
     currentIcon = currentIcon.url; 
     var newIcon = { 
      url: currentIcon, 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(30, 30), 
      scaledSize:new google.maps.Size(40, 40), 
      fillColor: '#1077aa', 
      fillOpacity: 1, 
      strokeColor: '#1077aa' 
     }; 
     currentMarker.setIcon(newIcon); 
     if(typeof oMarkers_panier[$(this).data("type")+"-"+$(this).data("id")] == 'undefined' || oMarkers_panier[$(this).data("id")] == null){ 
      currentMarker.setIcon(newIcon); 
     } 
     oInfo[$(this).data("type")+"-"+$(this).data("id")].open(oMap, currentMarker); 
     currentMarker.setAnimation(google.maps.Animation.BOUNCE); 

    });

我得到的標記與調用getIcon當前圖標（），然後我創建具有相同的圖像，但一種新顏色新的標記。問題是標記的顏色不變。我試圖改變一個基本的PNG整個圖標，它的工作原理，所以我不知道可能是什麼問題。

這裏是我的SVG代碼：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve"> 
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="15.5" y1="15.5" x2="15.5" y2="26.0013"> 
    <stop offset="0" style="stop-color:#808080"/> 
    <stop offset="1" style="stop-color:#636362"/> 
</linearGradient> 
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" stroke="#FFFFFF" stroke-miterlimit="10" d="M15.5,27.5 
    c0,0-9-10.029-9-15s4.029-9,9-9s9,4.029,9,9S15.5,27.5,15.5,27.5z"/> 
<path fill="#FFFFFF" d="M11.154,11.065c0-0.58,0.47-1.052,1.051-1.052s1.052,0.472,1.052,1.052c0,0.581-0.471,1.051-1.052,1.051 
    S11.154,11.646,11.154,11.065z"/> 
<path fill="#FFFFFF" d="M19.893,12.116h-6.157v-1.353c0-0.413,0.312-0.75,0.696-0.75h4.764c0.385,0,0.697,0.337,0.697,0.75V12.116z" 
    /> 
<path fill="#FFFFFF" d="M21.607,10.068v4.355c0,0.249-0.201,0.451-0.451,0.451c-0.124,0-0.236-0.052-0.318-0.133 
    c-0.08-0.082-0.132-0.193-0.132-0.318v-0.751h-10.12v0.789c0,0.228-0.186,0.413-0.414,0.413c-0.113,0-0.217-0.047-0.293-0.121 
    c-0.074-0.076-0.12-0.179-0.12-0.292V8.19c0-0.229,0.185-0.413,0.413-0.413c0.115,0,0.217,0.047,0.292,0.121 
    s0.122,0.178,0.122,0.292v4.73h10.12v-2.853c0-0.249,0.201-0.451,0.45-0.451c0.125,0,0.237,0.05,0.318,0.132 
    C21.557,9.831,21.607,9.943,21.607,10.068z"/> 
<path display="none" fill="#FFFFFF" d="M19.424,11.294c-0.247-0.066-0.496-0.089-0.737-0.073c-0.07-0.428-0.151-0.928-0.246-1.515 
    l0.261-0.373l0.519,0.129l0.116-0.432L17.392,8.51c-0.232,0.187,0.007,0.249,0.816,0.671l-0.264,0.383l-3.84-1.029 
    c0.501-0.834,0.337-0.809,1.5-0.493L15.724,7.6c-1.607-0.415-1.281-0.521-2.879,2.011C12.72,9.55,12.588,9.501,12.45,9.464 
    c-1.218-0.326-2.474,0.398-2.8,1.616s0.399,2.474,1.616,2.8c1.218,0.326,2.475-0.399,2.801-1.616c0.244-0.911-0.101-1.844-0.8-2.393 
    c0.088-0.138,0.184-0.285,0.286-0.443c2.317,4.274,1.253,3.396,2.974,3.931c0.008,0.003,0.017,0.005,0.024,0.007 
    c-0.063,1.062,0.625,2.06,1.69,2.345c1.218,0.326,2.475-0.398,2.801-1.616S20.642,11.62,19.424,11.294z M13.55,12.125 
    c-0.25,0.934-1.212,1.489-2.146,1.239c-0.933-0.25-1.488-1.213-1.238-2.146s1.212-1.488,2.145-1.238 
    c0.084,0.022,0.165,0.051,0.243,0.085c-0.994,1.555-0.878,1.379-0.919,1.521c-0.036,0.12,0.037,0.242,0.157,0.284 
    c0.227,0.036,0.167,0.06,1.186-1.545C13.486,10.749,13.732,11.445,13.55,12.125z M15.759,12.604l-1.892-3.628l3.76,1L15.759,12.604z 
    M16.626,12.903l-0.411-0.112l1.816-2.513l0.168,1.027C17.459,11.521,16.843,12.104,16.626,12.903z M18.288,11.839l0.259,1.583 
    l-1.403-0.38C17.302,12.454,17.747,12.017,18.288,11.839z M18.379,15.193c-0.78-0.209-1.297-0.916-1.298-1.688 
    c1.76,0.474,1.893,0.606,1.999,0.308c0.021-0.09,0.005-0.16-0.307-2.062c0.169-0.006,0.341,0.013,0.512,0.059 
    c0.933,0.25,1.488,1.213,1.238,2.146S19.312,15.443,18.379,15.193z"/> 
</svg>

我沒有錯誤，一切工作除了標記的顏色沒有變化。

你能幫助我嗎？

謝謝

來源

2015-02-10 TEOL

-1

我不認爲Icon對象具有fillColor屬性。我想你只需爲每個你想要使用的顏色變體提供一個單獨的標記SVG。

https://developers.google.com/maps/documentation/javascript/reference#Icon

來源

2015-02-10 15:41:49

我發現：http://stackoverflow.com/questions/24413766/how-to-use-svg-markers-in-google-maps-api-v3 Google文檔：https：//developers.google .com/maps/documentation/javascript/symbols 所以在符號上有一個fillColor屬性，但顯然不在圖標上。但我甚至不知道符號和圖標之間的區別 – TEOL 2015-02-11 09:16:15

符號就像一個只有一個路徑元素的迷你SVG。 'path'屬性就是SVG''的'd'屬性。並且您使用其他符號屬性指定填充顏色，描邊顏色等。一個圖標引用一個完整的圖像，可以是一個SVG或PNG等。 – 2015-02-11 11:49:55

好的，所以我將不得不爲每種顏色使用不同的圖標。謝謝！ – TEOL 2015-02-11 13:19:49

這裏的使用（經歷的標記和更新的原始值）。我和fillColor是在摺疊之上設置的變量。

markers[i].setIcon(
    { 
     path: google.maps.SymbolPath.CIRCLE, scale: 20, fillOpacity: 1, strokeWeight: 1, fillColor: '' + fillColor + '' 
    } 
);

不知道如何與您的SVG圖像一起工作，只是使用它來展示setIcon（google.maps.Symbol）的用法。

來源

2016-02-08 18:14:55

「謝謝」@slfan讓我的代碼更漂亮。不，這不是必要的，我們中的一些人更喜歡單線。 – 2016-02-08 19:46:36

我能夠通過使用SVG路徑動態控制標記的顏色。例如：

new google.maps.Marker({ 
        position: new google.maps.LatLng(data.latitude, data.longitude), 
        map: googleMap, 
        visible: isVisible, 
        icon: { 
         path: "M7.8,1.3L7.8,1.3C6-0.4,3.1-0.4,1.3,1.3c-1.8,1.7-1.8,4.6-0.1,6.3c0,0,0,0,0.1,0.1" + 
           "l3.2,3.2l3.2-3.2C9.6,6,9.6,3.2,7.8,1.3C7.9,1.4,7.9,1.4,7.8,1.3z M4.6,5.8c-0.7,0-1.3-0.6-1.3-1.4c0-0.7,0.6-1.3,1.4-1.3" + 
           "c0.7,0,1.3,0.6,1.3,1.3C5.9,5.3,5.3,5.9,4.6,5.8z", 
         strokeColor: markerColor, 
         fillColor: markerColor, 
         fillOpacity: 1.0, 
         scale: 3 
        }, 
        data: data 
       });

在我的情況下，我不需要中風和填充是不同的顏色，但你可以看到，它是一個選項。另外要注意的是，如果爲填充着色，您需要將fillOpacity設置爲1.0才能顯示。這是因爲fillOpacity的默認值爲0.

來源

2017-07-26 19:56:33 Ant

當您添加svg文件作爲標記時，google會將該svg放在標記下，這意味着您無法控制其中的對象。唯一的方法是直接在路徑下放置路徑，然後可以控制該對象。至於PNG，如果它具有一些透明度，那麼它接縫fillColor只是放置一些背景。無論如何，嘗試使用瀏覽器的開發者工具。

來源

2017-07-26 20:16:15 Tauras

GoogleMaps SVG標記fillColor

回答

相關問題