如何使用图像创建自定义形状的标记（Google Maps 地图 API v3）
How to create a custom-shaped marker with images (Google Maps map API v3)
我可以用图像替换 Google 地图标记：
我使用这个在地图上动态加载用户头像 :
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/
实现此目标的最佳方法是什么？
1) 这会在缩放地图时造成问题，您会将图像锚定到特定位置，将多边形锚定到特定位置，但随着缩放更改，它们将不再同步。
2) 不，不可能为标准 google.maps.Marker 加载两张图片，如果你想使用这种方法，你必须通过合并照片和框架的图片在后端生成 1 张图片并加载它
3) 根据您链接的示例扩展 google.maps.OverlayView 是使用自定义外观标记的推荐方法。您可以为他们提供自己的自定义 HTML/CSS/JS 功能，您真的没有比这更多的自由了。您可以在官方 docs 中了解更多关于覆盖的信息。
所以肯定选择 3，只有当我使用 2) 而不是 3) 的情况是你需要同时显示超过 10000 个标记，但即使在那种情况下，我也会先给出 MarkerClusterer一试。
最后但同样重要的是，如果您想在单击标记后添加一些自定义外观的气泡，请稍后查看 Google Maps Utility Libraries, which provides you with some easy-to-use solutions for many usual tasks, for example you can use RichMarker for your problem, or InfoBubble。
我可以用图像替换 Google 地图标记：
我使用这个在地图上动态加载用户头像 :
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/
实现此目标的最佳方法是什么？
1) 这会在缩放地图时造成问题，您会将图像锚定到特定位置，将多边形锚定到特定位置，但随着缩放更改，它们将不再同步。
2) 不，不可能为标准 google.maps.Marker 加载两张图片，如果你想使用这种方法，你必须通过合并照片和框架的图片在后端生成 1 张图片并加载它
3) 根据您链接的示例扩展 google.maps.OverlayView 是使用自定义外观标记的推荐方法。您可以为他们提供自己的自定义 HTML/CSS/JS 功能，您真的没有比这更多的自由了。您可以在官方 docs 中了解更多关于覆盖的信息。
所以肯定选择 3，只有当我使用 2) 而不是 3) 的情况是你需要同时显示超过 10000 个标记，但即使在那种情况下，我也会先给出 MarkerClusterer一试。
最后但同样重要的是，如果您想在单击标记后添加一些自定义外观的气泡，请稍后查看 Google Maps Utility Libraries, which provides you with some easy-to-use solutions for many usual tasks, for example you can use RichMarker for your problem, or InfoBubble。