有没有办法使谷歌地图标记中的透明度不可点击

Question

好吧，我有一个谷歌地图应用程序，我从 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 标记非常复杂，并且大小会根据参数而变化，因此更改视图框大小将导致它在我制作时被切断一个更大的图标。还有其他方法可以解决这个问题吗？就像将视图框大小设置为自动或其他什么的方法

Answer 1

有一个shape选项google.maps.Marker允许您为非 IE 浏览器指定标记的“可点击”区域。

\n

\n

MarkerShape 对象规范

\n

\n

\n

google.maps.MarkerShape 对象规范

\n

\n

\n

该对象定义除 Internet Explorer 之外的浏览器的标记图像的可单击区域。该形状由两个属性 \xe2\x80\x94 type 和 coord \xe2\x80\x94 组成，它们定义图像的非透明区域。Internet Explorer 上不需要 MarkerShape 对象，因为浏览器默认情况下不会在图像的透明区域上触发事件。

\n

\n

对于您的图标（至少是您在示例中提供的图标），该形状大约为三角形：

\n

marker = new google.maps.Marker({\n  position: loc,\n  map: map,\n  draggable: false,\n  icon: icon,\n  zIndex: -20,\n  shape: { \n      type: \'poly\',\n      coords: [50,50,  105,50,  75,90,  50,50]\n  } \n});\n

\n

更新了小提琴

\n

代码片段：

\n

\r\n

\r\n

marker = new google.maps.Marker({\n  position: loc,\n  map: map,\n  draggable: false,\n  icon: icon,\n  zIndex: -20,\n  shape: { \n      type: \'poly\',\n      coords: [50,50,  105,50,  75,90,  50,50]\n  } \n});\n

\r\n

var myLatlng = new google.maps.LatLng(38.392303, -86.931067);\n\nmap = new google.maps.Map(document.getElementById("map-canvas"), {\n  zoom: 4,\n  center: myLatlng,\n  mapTypeId: google.maps.MapTypeId.ROADMAP\n});\n\nvar iconUrl = "data:image/svg+xml;charset=utf-8," + escape(document.getElementById("builtMarker").innerHTML);\nvar sizeX = 160;\nvar sizeY = 140;\nvar icon = {\n  url: iconUrl,\n  scaledSize: new google.maps.Size(sizeX, sizeY),\n  anchor: new google.maps.Point(sizeX / 2, sizeY / 2)\n};\nloc = new google.maps.LatLng(63.68212926717004, -99.33484864981511);\nmarker = new google.maps.Marker({\n  title: "SVG mark",\n  position: loc,\n  map: map,\n  draggable: false,\n  icon: icon,\n  zIndex: -20,\n  shape: {\n    type: \'poly\',\n    coords: [50, 50, 105, 50, 75, 90, 50, 50]\n  }\n});\nmap.panTo(loc);

\r\n

\r\n

\r\n

\n