放地图前的谷歌地图圆别针答案

【问题标题】：Google map round pin before putting on map放地图前的谷歌地图圆别针
【发布时间】：2016-08-02 08:33:28
【问题描述】：

您好，我尝试了广泛的谷歌搜索，但似乎没有任何帮助。

这是我的场景：

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

我发现如果我在整个页面中添加css来表示：

img { border-radius: 50%; }

然后它会舍入图像，但也会舍入地图背景。我无法指定要在 css 中设置样式的图像 url，因为每个徽标 url 都会不同。如何仅通过 javascript 实现这一点，或者如何为每个地图 pin 分配一个 css 类？

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

【问题讨论】：

你为什么要在整个页面上设置它而不是只是你要圆整的元素？
@MattClark 当我检查地图并尝试访问我无法访问的元素时，它是画布的一部分，因此无法直接访问。如果我可以在添加时向 pin 添加一个 css 类，那么我肯定会以这种方式访问它。

【解决方案1】：

您可以使用自己的图像创建自定义标记..

在这里试试：

这应该让你开始..

【讨论】：

抱歉，第一个链接是根据您绘制的形状创建标记。我有一个位于用作标记的 url 上的现有图像。第二个链接没有帮助，我在地图上放置标记没有问题，我想做的是围绕放置的标记的边缘。
好的，然后试试这个：[link] stackoverflow.com/questions/25367542/… 链接中的第三个答案有一个正方形图像被放在圆角边框中的例子。这会将图像放在一个圆圈上。如果它只是您需要舍入的边缘，您应该能够使用此示例并将其与第一个一起使用：[链接]w3schools.com/css/css3_borders.asp。

【解决方案2】：

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

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

【讨论】：

迈克的回答对我没有帮助，我已经能够放置一个标记，使用的图标是一个位于 url 上的图像，但是我需要将每个标记更改为具有圆形边缘，无论如何图像在 url 上成形。这就是我的目标。

【解决方案3】：

我可以通过 MarkerWithLabel 插件实现这一点。然后通过将图像作为标签放置在标记下，我可以通过将图标 url 定义为空字符串然后将图像 url 放入标签来隐藏标记，然后标签具有我可以通过 css 操作的 css 类。

【讨论】：