如何使用图像创建自定义形状标记(Google Maps map API v3)

Question

我可以用图片替换谷歌地图标记:

我使用以下方法在地图上动态加载用户头像:

var icon = {
        // i get images url dynamically with html5 data attributes
        url: $marker.attr('data-icon'), // url

        scaledSize: new google.maps.Size(50, 50), // scaled size
        origin: new google.maps.Point(0, 0), // origin
        anchor: new google.maps.Point(0, 0) // anchor


    };

结果如下:

现在,它正在工作,但图形结果不是我想要的.我想有类似的东西(我没有设计这个例子,但你可以看到这个想法):

我在考虑3种可能的解决方案:

1-在图像后面创建一个多边形,以创建边框和一种箭头.

2)加载2张图像:头像图像和自定义图钉的图像后面(不确定是否可以为标记加载2张图像)

3)添加为标记定制CSS的可能性,就像在这个问题的答案中一样:

JS Maps v3:带有用户个人资料图片 演示的自定义标记:http://jsfiddle.net/mfirdaus/DVKEj/

实现这一目标的最佳方法是什么？

Answer 1

1)这会在缩放地图时出现问题,您可以将图像锚定到特定位置,将多边形锚定到特定位置,但是随着缩放更改,它们将不再同步.

2)不能为标准加载两个图像google.maps.Marker,如果你想采用这种方法,你必须通过合并照片和帧的图像在后端生成1个图像并加载

3)google.maps.OverlayView根据示例扩展您链接是推荐使用自定义标记的方法.您可以为他们提供自己的自定义HTML/CSS/JS功能,您实际上无法获得更多自由.您可以在官方文档中了解有关叠加层的更多信息.

所以一定要选择3,只有当我使用2)而不是3)的情况时,你需要同时显示超过10000个标记,但即使在这种情况下,我也会首先尝试使用MarkerClusterer.

最后但并非最不重要的,看看谷歌地图工具库,它为您提供了很多常用任务的一些易于使用的解决方案,例如,你可以使用RichMarker你的问题,或者InfoBubble后,如果你想添加一些自定义的寻找泡沫点击标记后.