在Google地图V3中更改标记大小

Question

我正在使用这篇解释，通过设置图标使用MarkerImage来对谷歌地图标记进行着色，并且着色效果很好。但我无法通过改变scaledSize参数来改变标记的大小。

    var pinColor = 'FFFF00';
    var pinIcon = new google.maps.MarkerImage(
        "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34),
        new google.maps.Size(2, 4));
    marker.setIcon(pinIcon);

scaledSize参数的正确使用方法是什么，以更改标记大小？例如，如何将标记大小加倍？

- steampowered

Answer 1

这个答案详细阐述了John Black的有用答案，因此我将在我的答案中重复他的一些内容。

似乎最简单的调整标记大小的方法是将参数2、3和4留空，并在参数5中缩放大小。

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFF00",
    null, /* size is determined at runtime */
    null, /* origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(42, 68)
);  

另外，这个回答针对类似的问题声称，在第二个参数中定义标记大小比在第五个参数中进行缩放要好。但我不知道这是否正确。

将参数2-4保留为空对于默认的Google Pin图像效果很好，但是必须显式地设置默认的Google Pin阴影图像锚点，否则它会看起来像这样：

当您在地图上查看图形时，针图像底部的中心碰巧与针的尖端重合。这很重要，因为当您将锚点（第4个参数）保留为null时，标记的位置属性（标记在地图上的LatLng位置）将自动与针的视觉尖端重合。换句话说，保留锚点为空确保了指针朝向正确的方向。

然而，阴影的尖端并不位于底部中心。因此，您需要显式设置第四个参数以抵消针阴影的尖端，使阴影的尖端与针图像的尖端重合。

通过实验，我发现应将阴影的尖端设置如下：x为大小的1/3，y为大小的100％。

var pinShadow = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
    null,
    null,
    /* Offset x axis 33% of overall size, Offset y axis 100% of overall size */
    new google.maps.Point(40, 110), 
    new google.maps.Size(120, 110)); 

为了展现这样的效果：

- steampowered

---

在 google.maps.Size 中是否有保持宽高比的方法，或者能否指定百分比而不是实际像素？谢谢！ - Luis A. Florit

有没有办法重新调整默认标记图标的比例？也就是说，是否可以更改标记的缩放比例，而无需在标记上使用“setIcon”？ - ironchicken

Answer 2

此处的 size 参数单位为像素。因此，要将您的示例中的标记大小加倍，MarkerImage 构造函数的第五个参数应为：

new google.maps.Size(42,68)

我发现最简单的方法是让地图API来确定其他参数，除非我需要除了图像底部/中心作为锚点之外的其他内容。在你的情况下，你可以这样做：

var pinIcon = new google.maps.MarkerImage(
    "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
    null, /* size is determined at runtime */
    null, /* origin is 0,0 */
    null, /* anchor is bottom center of the scaled image */
    new google.maps.Size(42, 68)
);

- John Black