谷歌地图圆针在放在地图上之前

Question

您好我在谷歌上广泛搜索，但似乎没有任何帮助。

这是我的情景：

1. 公司徽标存储在外部域/网址（矩形）中。
2. 带有谷歌地图的离子应用程序，将这些徽标作为标记放在地图上。

标记看起来很难看，我想在地图上将它们弄圆。

我发现如果我在整个页面上添加css说：

img { border-radius: 50%; }

然后它会对图像进行舍入，但也会对地图背景进行舍入。由于每个徽标网址都不同，我无法在css中指定图片网址样式。我怎样才能通过javascript单独实现这一点，或者如何为每个地图引脚分配一个css类？

编辑：只是为了指定，我添加了这样一个通用的CSS样式，因为当我检查元素时，地图引脚是画布的一部分，并没有显示给我检查。如上所述，我很乐意为引脚分配一个css类，以便我可以直接定位它。

Answer 1

您可以使用自己的图片创建自定义标记。

https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom

试试这里：

https://m.youtube.com/watch?v=ZtNrt9vRt10

这应该让你开始..

Answer 2

@ MikeCave的建议很棒。我特别喜欢这个，因为高分辨率屏幕会更好地显示标记，因为谷歌地图正在限制多个分辨率。

如上面的评论所示，如果您要对所有图像应用一般规则，则需要更加具体。您可以指定iframe img以获得更具体的信息，因为Google地图会将地图置于iframe内。更棒的是，请查看this answer，了解如何为标记添加类名以便更好地定位。

Answer 3

我能够通过插件MarkerWithLabel实现这一目标。然后通过将图像作为标记放在标记下面，我可以通过将图标URL定义为空字符串然后将图像URL放入标签来隐藏标记，然后标签有一个css类，我可以通过css操作。