GoogleMaps SVG marker fillColor

时间：2015-02-10 11:29:46

标签： javascript jquery svg icons marker

我目前正在尝试更改现有标记的颜色。

这是我的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>

我没有错误，除了标记的颜色没有变化外，一切正常。

你能帮我吗？

由于

4 个答案:

答案 0 :(得分：3)

这里是使用（通过标记并更新原始值）。 i和fillColor是折叠上方设置的变量。

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

不确定这对你的SVG图像有什么用处，只是用它来展示setIcon（google.maps.Symbol）的用法。

答案 1 :(得分：1)

我能够通过使用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.

答案 2 :(得分：0)

当您添加svg文件作为标记时，Google会将该svg物理地放在标记下，这意味着您无法控制其中的对象。唯一的方法是将路径直接放在图标下，然后就可以控制该对象。从png开始，如果它有一些透明度，那么它的接缝fillColor只是放一些背景。无论如何，尝试使用浏览器的开发人员工具。

答案 3 :(得分：-1)

我不相信Icon对象具有fillColor属性。我认为您只需为要使用的每种颜色变体提供单独的标记SVG。

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

相关问题
最新问题