谷歌地图 SVG 标记填充颜色
GoogleMaps SVG marker 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>
我没有错误，一切正常，只是标记的颜色没有改变。
你能帮帮我吗？
谢谢
我不相信 Icon 对象有 fillColor 属性。我认为您只需为要使用的每种颜色变体提供一个单独的标记 SVG。
https://developers.google.com/maps/documentation/javascript/reference#Icon
这是用法（遍历标记并更新原始值）。 i 和 fillColor 是首屏设置的变量。
markers[i].setIcon(
{
path: google.maps.SymbolPath.CIRCLE, scale: 20, fillOpacity: 1, strokeWeight: 1, fillColor: '' + fillColor + ''
}
);
不确定如何处理您的 SVG 图像，只是用它来展示 setIcon(google.maps.Symbol) 的用法。
我能够使用 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。
当您添加 svg 文件作为标记时，google 物理上将该 svg 置于标签下，这意味着您无法控制其中的对象。唯一的办法就是把path直接放在icon下面，这样就可以控制那个对象了。至于 png，如果它有一些透明度，那么它接缝 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>
我没有错误，一切正常，只是标记的颜色没有改变。
你能帮帮我吗？
谢谢
我不相信 Icon 对象有 fillColor 属性。我认为您只需为要使用的每种颜色变体提供一个单独的标记 SVG。
https://developers.google.com/maps/documentation/javascript/reference#Icon
这是用法（遍历标记并更新原始值）。 i 和 fillColor 是首屏设置的变量。
markers[i].setIcon(
{
path: google.maps.SymbolPath.CIRCLE, scale: 20, fillOpacity: 1, strokeWeight: 1, fillColor: '' + fillColor + ''
}
);
不确定如何处理您的 SVG 图像，只是用它来展示 setIcon(google.maps.Symbol) 的用法。
我能够使用 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。
当您添加 svg 文件作为标记时，google 物理上将该 svg 置于标签下，这意味着您无法控制其中的对象。唯一的办法就是把path直接放在icon下面，这样就可以控制那个对象了。至于 png，如果它有一些透明度，那么它接缝 fillColor 只是放置一些背景。无论如何尝试使用浏览器的开发者工具。