如何使用图像创建自定义形状标记（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: custom marker with user profile picture 演示：http://jsfiddle.net/mfirdaus/DVKEj/

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

Answer 1

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

2）不能为标准events加载两个图像，如果你想采用这种方法，你必须通过合并照片和帧的图像并加载来生成后端的1个图像

3）根据示例扩展google.maps.Marker您建议使用自定义标记的方式链接。您可以为他们提供自己的自定义HTML / CSS / JS功能，您实际上无法获得更多自由。您可以在官方docs中了解有关叠加层的更多信息。

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

最后但并非最不重要的一点，请查看MarkerClusterer，它为您提供了一些易于使用的解决方案，可用于许多常规任务，例如您可以使用Google Maps Utility Libraries解决问题，或{{3稍后如果您想在点击标记后添加一些自定义的气泡。