有没有办法让谷歌地图标记中的透明度无法点击
is there a way to make the transparency in the google map marker not clickable
好吧，所以我有一个谷歌地图应用程序，我从html中读取svgs，然后用它们做标记。但现在的问题是，标记附带的透明度也是可点击的，现在这在封闭集群中造成了问题。所以我的问题是，除了在谷歌地图标记中使用"path:"而不是"url:"之外，是否可以只让有路径的标记的一部分而不是整个区域可以点击。
所以目前：
//gets it from my html and treats it like a path
var iconUrl = "data:image/svg+xml;charset=utf-8," + escape(document.getElementById("builtMarker").innerHTML);
var sizeX = 160;
var sizeY = 140;
//make my custom icon
var icon = {
url: iconUrl,
scaledSize: new google.maps.Size(sizeX, sizeY),
anchor: new google.maps.Point(sizeX / 2, sizeY / 2)
};
loc = new google.maps.LatLng(63.68212926717004, -99.33484864981511);
marker = new google.maps.Marker({
position: loc,
map: map,
draggable: false,
icon: icon,
zIndex: -20,
});
https://jsfiddle.net/y8yj86og/3/
因此，如果你看看小提琴，"悬停"的手在真正到达图标之前会发生变化，我的svg标记非常复杂，并且会根据参数的大小而变化，所以当我制作更大的图标时，改变视图框的大小会导致它被切断。还有别的办法吗？类似于将视框大小设置为自动或其他大小的方法
google.maps.Marker有一个shape选项，允许您为非IE浏览器的标记指定"可点击"区域。
MarkerShape对象规范
google.maps.MarkerShape对象规范
此对象为Internet Explorer以外的浏览器定义标记图像的可单击区域。该形状由两个属性组成——类型和坐标——它们定义了图像的不透明区域。Internet Explorer上不需要MarkerShape对象，因为默认情况下浏览器不会在图像的透明区域上激发事件。
对于您的图标（至少是您在示例中提供的图标），其形状近似为三角形：
marker = new google.maps.Marker({
position: loc,
map: map,
draggable: false,
icon: icon,
zIndex: -20,
shape: {
type: 'poly',
coords: [50,50, 105,50, 75,90, 50,50]
}
});
更新的fiddle
代码片段：
var myLatlng = new google.maps.LatLng(38.392303, -86.931067);
map = new google.maps.Map(document.getElementById("map-canvas"), {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var iconUrl = "data:image/svg+xml;charset=utf-8," + escape(document.getElementById("builtMarker").innerHTML);
var sizeX = 160;
var sizeY = 140;
var icon = {
url: iconUrl,
scaledSize: new google.maps.Size(sizeX, sizeY),
anchor: new google.maps.Point(sizeX / 2, sizeY / 2)
};
loc = new google.maps.LatLng(63.68212926717004, -99.33484864981511);
marker = new google.maps.Marker({
title: "SVG mark",
position: loc,
map: map,
draggable: false,
icon: icon,
zIndex: -20,
shape: {
type: 'poly',
coords: [50, 50, 105, 50, 75, 90, 50, 50]
}
});
map.panTo(loc);<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas" style="height:600px"></div>
<div id="builtMarker">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve">
<path fill="#74C380" stroke="#000000" stroke-miterlimit="10" d="M319.669,455.002c-11.99-16.691-22.492-15.168-22.492-15.168v0.016
c-0.006,0-10.504-1.488-22.475,15.23c1.299,3.563,22.51,61.154,22.51,61.154l0.004-0.02
C297.216,516.213,318.372,458.568,319.669,455.002z" />
<path opacity="0.54" fill="#74C380" stroke="#000000" stroke-miterlimit="10" d="M297.187,440.656" />
<path fill="#234821" stroke="#000000" stroke-miterlimit="10" d="M297.171,422.465c0,0-13.275-0.682-26.111,12.199
c0.713,1.557,4.797,9.029,6.254,11.705c10.332-10.494,19.873-9.631,19.873-9.631s9.543-0.877,19.9,9.602
c1.451-2.68,5.516-10.158,6.225-11.717C310.444,421.764,297.171,422.465,297.171,422.465z" />
<path fill="#C52727" stroke="#000000" stroke-miterlimit="10" d="M297.165,404.046c0,0-17.482-0.683-34.387,12.198
c0.939,1.557,6.316,9.029,8.236,11.705c13.607-10.494,26.174-9.629,26.174-9.629s12.568-0.879,26.209,9.6
c1.906-2.68,7.262-10.156,8.195-11.717C314.646,403.344,297.165,404.046,297.165,404.046z" />
<path fill="#D8E022" stroke="#000000" stroke-miterlimit="10" d="M297.157,385.625c0,0-21.969-0.682-43.213,12.199
c1.18,1.557,7.938,9.029,10.352,11.705c17.098-10.494,32.895-9.63,32.895-9.63s15.793-0.878,32.936,9.601
c2.396-2.68,9.127-10.157,10.301-11.717C319.13,384.924,297.157,385.625,297.157,385.625z" />
<path fill="#3F52A4" stroke="#000000" stroke-miterlimit="10" d="M297.149,367.205c0,0-28.982-0.682-57.008,12.199
c1.559,1.557,10.471,9.029,13.654,11.705c22.557-10.494,43.396-9.63,43.396-9.63s20.834-0.878,43.447,9.601
c3.16-2.68,12.041-10.157,13.59-11.717C326.132,366.504,297.149,367.205,297.149,367.205z" />
<path fill="#3B98D4" stroke="#000000" stroke-miterlimit="10" d="M297.142,348.785c0,0-35.719-0.682-70.26,12.198
c1.922,1.557,12.906,9.03,16.828,11.706c27.803-10.494,53.484-9.631,53.484-9.631s25.676-0.877,53.549,9.601
c3.893-2.679,14.838-10.157,16.746-11.716C332.86,348.083,297.142,348.785,297.142,348.785z" />
<path fill="#B24F9E" stroke="#000000" stroke-miterlimit="10" d="M297.13,325.867c0,0-44.416-0.811-87.363,14.494
c2.389,1.85,16.049,10.729,20.924,13.909c34.572-12.469,66.506-11.443,66.506-11.443s31.926-1.043,66.584,11.408
c4.842-3.184,18.453-12.068,20.824-13.922C341.546,325.032,297.13,325.867,297.13,325.867z" />
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="271.417" y1="434.4395" x2="323.6689" y2="434.4395">
<stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" />
<stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" />
<stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" />
<stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" />
<stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" />
</linearGradient>
<path fill="url(#SVGID_1_)" d="M297.528,422.491c0,0-13.275-0.682-26.111,12.199c0.713,1.557,4.797,9.029,6.254,11.705
c10.332-10.494,19.873-9.631,19.873-9.631s9.543-0.877,19.9,9.602c1.451-2.68,5.516-10.158,6.225-11.717
C310.802,421.79,297.528,422.491,297.528,422.491z" />
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="263.124" y1="415.9946" x2="332.5928" y2="415.9946">
<stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" />
<stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" />
<stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" />
<stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" />
<stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" />
</linearGradient>
<path fill="url(#SVGID_2_)" d="M297.839,404.046c0,0-17.649-0.682-34.715,12.199c0.948,1.557,6.377,9.029,8.314,11.705
c13.736-10.494,26.421-9.631,26.421-9.631s12.688-0.877,26.458,9.602c1.929-2.68,7.333-10.158,8.275-11.717
C315.485,403.345,297.839,404.046,297.839,404.046z" />
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="253.9443" y1="397.5737" x2="340.4268" y2="397.5737">
<stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" />
<stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" />
<stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" />
<stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" />
<stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" />
</linearGradient>
<path fill="url(#SVGID_3_)" d="M297.161,385.625c0,0-21.972-0.682-43.217,12.199c1.18,1.557,7.938,9.029,10.351,11.705
c17.101-10.494,32.892-9.631,32.892-9.631s15.796-0.877,32.938,9.602c2.401-2.68,9.129-10.158,10.303-11.717
C319.129,384.924,297.161,385.625,297.161,385.625z" />
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="240.1416" y1="378.8638" x2="355.2295" y2="378.8638">
<stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" />
<stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" />
<stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" />
<stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" />
<stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" />
</linearGradient>
<path fill="url(#SVGID_4_)" d="M297.654,367.205c0,0-29.24-0.665-57.513,11.903c1.57,1.519,10.564,8.81,13.774,11.421
c22.757-10.239,43.771-9.397,43.771-9.397s21.02-0.855,43.832,9.369c3.195-2.615,12.147-9.912,13.71-11.433
C326.888,366.521,297.654,367.205,297.654,367.205z" />
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="225.4072" y1="360.7339" x2="370.3096" y2="360.7339">
<stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" />
<stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" />
<stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" />
<stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" />
<stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" />
</linearGradient>
<path fill="url(#SVGID_5_)" d="M297.818,349.075c0,0-36.814-0.665-72.411,11.903c1.978,1.519,13.301,8.81,17.343,11.421
c28.651-10.239,55.11-9.397,55.11-9.397s26.465-0.855,55.188,9.369c4.022-2.615,15.295-9.912,17.262-11.433
C334.626,348.391,297.818,349.075,297.818,349.075z" />
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="207.0791" y1="339.6611" x2="388.25" y2="339.6611">
<stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" />
<stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" />
<stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" />
<stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" />
<stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" />
</linearGradient>
<path fill="url(#SVGID_6_)" d="M297.614,325.407c0,0-46.028-0.813-90.535,14.553c2.472,1.856,16.63,10.771,21.684,13.964
c35.823-12.519,68.904-11.489,68.904-11.489s33.089-1.046,69.001,11.455c5.029-3.198,19.124-12.119,21.582-13.979
C343.636,324.57,297.614,325.407,297.614,325.407z" />
</svg>
</div>相关文章：
- Javascript更改图标
- 单击更改图标并通过javascript添加一个css类
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 如何更改角度谷歌地图上的集群图标
- 如何更改文本框控件的不透明度值
- simpleweather js天气图标
- 更改图层中单个矢量特征的图标
- 使用Angular单击时更改特定图示符图标的颜色
- 加载图像时加载图标
- 可以'点击汉堡包图标后，菜单无法正常打开
- 持久页面操作图标
- 点击图标是't在量角器上工作
- 通过单击同一图标使菜单出现和消失
- 在js中访问元素时不透明度和样式未定义，但在css中定义
- 在for循环中使用多维数组设置google.maps.Marker图标
- 替换与单词'匹配的文本字符;购物车'替换为img图标
- 谷歌地图API-显示具有不同图标的标记
- 如何(功能）检测浏览器是否支持WebM alpha透明度
- 更改 JWPlayer 显示图标(播放按钮）的不透明度
- 不透明度改变卷轴上的图标
