如何使用图像创建自定义形状的标记(Google Maps map API v3) [英] How to create a custom-shaped marker with images (Google Maps map API v3)

问题描述

我可以用图片替换Google Map Markers:

I’m able to replace Google Map Markers with images :

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

I dynamically load users avatars on the map using this :

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


    };

这是结果:

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

For now, it’s working but the graphic result is not what i want. I would like to have something like (i didn't design this example but you can see the idea) :

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

I was thinking of 3 possible solutions :

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

1- Create a polygon behind image in order to create a border and a kind of arrow.

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

2) Load 2 images : avatar image and behind graphic image of a custom pin (not sure it’s possible to load 2 images for a marker)

3)可以为标记添加自定义CSS，例如此问题的答案:

3) Add the possibility to have custom CSS for the markers like in this answer on this question :

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

实现此目标的最佳方法是什么?

What would be the best approach to achieve this ?

推荐答案

1)缩放地图时，这会造成问题，您需要将图像锚定到特定位置，将多边形锚定到特定位置，但是通过缩放更改它们将不再同步.

1) This would pose a problem when zooming the map, you would anchor the image to specific position, anchor the polygon to specific position, but with zoom change they would no longer be synchronised.

2)不，无法为标准 google.maps.Marker 加载两个图像，如果要使用此方法，则必须通过合并照片图像在后端生成1个图像并装帧并加载

2) No it's not possible to load two images for standard google.maps.Marker, if you wanted to go with this approach you would have to generate 1 image on backend by merging images of photo and frame and load that

3)按照您链接的示例扩展 google.maps.OverlayView 是推荐使用自定义外观标记的方法.您可以为他们提供自己的自定义HTML/CSS/JS功能，您不能真正获得更多的自由.您可以在官方文档中了解有关叠加层的更多信息.

3) Extending google.maps.OverlayView as per example you linked is the recommended way to go with custom looking markers. You can provide your own custom HTML/CSS/JS functionality to them, you cannot really get more freedom than that. You can learn more about overlays in the official docs.

所以绝对要使用3，只有当我需要使用2)而不是3)的情况下，才需要同时显示超过10000个标记，但是即使在这种情况下，我也要先给出 MarkerClusterer 尝试一下.

So definitely go with 3, Only situation when I would use 2) instead of 3) is when you would need to display more then 10000 markers at the same time, but even in that case, I would first give MarkerClusterer a try.

最后但并非最不重要的一点，请查看 Google Maps Utility Library ，它为您提供了一些简单的方法许多日常任务的按需使用解决方案，例如，您可以使用 RichMarker 解决问题，如果您想在单击标记后添加一些自定义的气泡，请稍后使用 InfoBubble .

Last but not least, check out 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 later if you wanted to add some custom looking bubble after clicking the markers.

这篇关于如何使用图像创建自定义形状的标记(Google Maps map API v3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！