通过SVG路径自定义谷歌地图标记

Question

我目前在另一个StackOverflow帖子中使用的SVG路径中使用红色圆圈作为谷歌地图标记。

new google.maps.Marker({
    map:map,
    icon:{
        path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
        fillColor: '#ff0000',
        fillOpacity: .6,
        anchor: new google.maps.Point(0,0),
        strokeWeight: 0,
        scale: 1
    }
});

我想修改这个并将我的标记画成一个空的红色正方形，带有白色的lat＆amp;从正方形边框向外延伸的长线，所以它看起来更有趣，就像来自Adobe Photoshop的草图一样：

我不太确定如何操纵我当前的图标来实现这个结果（对于白色和红色的一个方格中的两条线，似乎我需要3个不同的图标，尽管我＆＃39;我不确定如何将线条从正方形的边缘向外延伸到地图的边缘。）任何帮助都会非常感激。

Answer 1

如果这只是一个用标记写的香草svg，你的概念至少需要2条路径（如果它们都是相同的颜色，你可以用一条路径）。但是我不清楚这个用于定义svg的符号 -

 icon:{
    path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
    fillColor: '#ff0000',
    fillOpacity: .6,
    anchor: new google.maps.Point(0,0),
    strokeWeight: 0,
    scale: 1
}

允许多条路径。我会尝试在当前的路径下添加额外的路径。

延长线路的最简单方法＆＃39;只是让它们至少是屏幕宽度的两倍，所以即使将图标拖到屏幕的最边缘，它们也始终可见。有点粗略的解决方案，但它会起作用（假设谷歌地图没有修复svg的viewbox属性）。 正确的方式将涉及svg过滤器和/或剪辑路径（https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path），但我怀疑谷歌地图图标是否允许这样的功能。

下面显示的单路径解决方案 - 红色正方形的解决方案类似，红色正方形与灰色正方形部分重叠，并使灰色正方形部分略微变薄＆＃39;所以它不会从红色下突出